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
Neto2y 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
amur_sri2y ago
Sometimes this also occurs due to the browser extensions
Want results from more Discord servers?
Add your server