Tailwind - className did not match

I get this warning all the time:

Warning: Prop `className` did not match.
Server: "fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 w-52 flex flex-col bg-slate-700 text-slate-300"
Client: "fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 w-52  flex flex-col bg-slate-700 text-slate-300"

Warning: Prop `className` did not match.
Server: "fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 w-52 flex flex-col bg-slate-700 text-slate-300"
Client: "fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 w-52  flex flex-col bg-slate-700 text-slate-300"

this is the code I am using:

function SideBar(): JSX.Element {
  const [open, setOpen] = useState(true);

  return (
    <div
      className={`fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 ${open ? 'w-52 ' : 'w-2'} flex flex-col bg-slate-700 text-slate-300`}
    >
    // ...

function SideBar(): JSX.Element {
  const [open, setOpen] = useState(true);

  return (
    <div
      className={`fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 ${open ? 'w-52 ' : 'w-2'} flex flex-col bg-slate-700 text-slate-300`}
    >
    // ...

what do I have to do to not get this warning?

2 Replies

Neto•13mo ago

the code on the server is not the same as the one on client try changing to false initial state and check if the error disappear

amur_sri•13mo ago

Sometimes this also occurs due to the browser extensions

Gaming

Programming

Tailwind - className did not match