React tailwind css connected to state not working

Question

I'm trying to create a sidebar with a display style that changes from 'none' to 'block' based on the user clicking the Tasks button:

export default function Home() {
  const [sidebarDisplay, setSidebarDisplay] = React.useState<string>("none");
  const handleSetSidebarDisplay = () => {
    setSidebarDisplay((display) => (display === "none" ? "block" : "none"));
  };
  return (
    <div className="relative flex min-h-screen flex-col bg-background">
      <div className="flex-1 bg-slate-600 relative flex">
        <div
          className={`w-64 bg-slate-200 flex-initial relative display:${sidebarDisplay}`}
        >
          <div className="w-4 absolute top-1/2 transform -translate-y-1/2 -right-7 -rotate-90">
            <Button onClick={handleSetSidebarDisplay}>Tasks</Button>
          </div>
        </div>
        <main className="flex-1 bg-slate-950"></main>
      </div>
    </div>
  );
}

But nothing is happening when I click the button, any idea why?

I'm also not the greatest with frontend programming so if UI experts can tell me what I'm doing wrong in terms of the css/html, it would also be super helpful!

Answer 1

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Furthermore, display: is not a Tailwind variant (unless you have some custom Tailwind configuration that you have not provided that registers this). Neither is none a Tailwind utility class (unless you have some custom setup that registers this too) – did you perhaps mean the hidden class that applies display: none?

If you did mean to apply this custom display: variant to the block and none class, and this none is defined in your Tailwind setup, consider applying the display: variant to the strings used:

const [sidebarDisplay, setSidebarDisplay] = React.useState<string>("display:none");
const handleSetSidebarDisplay = () => {
  setSidebarDisplay((display) => (display === "display:none" ? "display:block" : "display:none"));
};
return (
  <div className="relative flex min-h-screen flex-col bg-background">
    <div className="flex-1 bg-slate-600 relative flex">
      <div
        className={`w-64 bg-slate-200 flex-initial relative ${sidebarDisplay}`}
      >

If you did mean to apply this custom display: variant to the block and hidden (not none) class, consider applying the display: variant to the strings used:

const [sidebarDisplay, setSidebarDisplay] = React.useState<string>("display:hidden");
const handleSetSidebarDisplay = () => {
  setSidebarDisplay((display) => (display === "display:hidden" ? "display:block" : "display:hidden"));
};
return (
  <div className="relative flex min-h-screen flex-col bg-background">
    <div className="flex-1 bg-slate-600 relative flex">
      <div
        className={`w-64 bg-slate-200 flex-initial relative ${sidebarDisplay}`}
      >

Otherwise, if you do not have any custom configuration that registers this display: variant or none class, consider removing the prefix altogether and use hidden instead of none:

const [sidebarDisplay, setSidebarDisplay] = React.useState<string>("hidden");
const handleSetSidebarDisplay = () => {
  setSidebarDisplay((display) => (display === "hidden" ? "block" : "hidden"));
};
return (
  <div className="relative flex min-h-screen flex-col bg-background">
    <div className="flex-1 bg-slate-600 relative flex">
      <div
        className={`w-64 bg-slate-200 flex-initial relative ${sidebarDisplay}`}
      >