title: Why Is My React + Tailwind Hamburger Menu Not Closing?
body: <p>I am building a hamburger menu with React and TailwindCSS. On clicking the 'X' button, I am changing the state, <code>isOpen</code> to <code>false</code>. The class of the <code>div</code> that wraps the menu reacts to the state change, yet the menu does not slide out. What am I missing here?</p>
  
  <p>Sidebar.js:</p>
  
  <pre><code>const Sidebar = () =&gt; {
    const [isOpen, toggleSidebar] = React.useState(true);
    return (
      &lt;div className="h-screen flex"&gt;
        &lt;div
          className={`fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 bg-gray-100 border-r overflow-auto lg:static  lg:inset-auto lg:translate-x-0 ${
            isOpen
              ? "translate-x-0 ease-out transition-medium"
              : "-translate-x-full ease-in transition-medium"
          }`}
        &gt;
          &lt;div className="-mx-3 pl-3 pr-1 flex items-center justify-between"&gt;
            &lt;span&gt;
              &lt;p className="h-10 w-10"&gt;Logo&lt;/p&gt;
            &lt;/span&gt;
            &lt;button
              onClick={() =&gt; toggleSidebar(false)}
              className="text-gray-700 lg:hidden"
            &gt;
              &lt;svg fill="none" viewBox="0 0 24 24" className="h-6 w-6"&gt;
                &lt;path
                  d="M6 18L18 6M6 6L18 18"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  stroke="currentColor"
                /&gt;
              &lt;/svg&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;nav className="mt-8"&gt;
            &lt;h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wide"&gt;
              STUFF
            &lt;/h3&gt;
            &lt;button className="mt-2 -ml-1 flex items-center text-sm font-medium text-gray-600"&gt;
              &lt;svg
                className="h-5 w-5 text-gray-500"
                viewBox="0 0 24 24"
                fill="none"
              &gt;
                &lt;path
                  d="M12 7v10m5-5H7"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                /&gt;
              &lt;/svg&gt;
              &lt;span className="ml-1"&gt;Add Stuff&lt;/span&gt;
            &lt;/button&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;Sidebar /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p><a href="https://codepen.io/IA_123/pen/bGdOEXp" rel="nofollow noreferrer">This</a> is a codepen with my script if that is helpful: </p>