title: Make sidebar slide in from the left when the button is clicked with TailwindCSS
body: <p>There is a sidebar menu and a button which shows/hides the sidebar. The problem is that I don't know how to make it slide in from the left when it appears. Also to slide back to the right of the screen when it is closing.</p>
  <p>Here is my code so far:</p>
  <pre><code>  const myClass = clsx({
      'transition duration-300 h-screen mt-5 fixed z-10 left-0 w-80 ': true,
      'opacity-0': open,
      'opacity-100': !open
    });
  ....
  
        return (
          &lt;div className='w-8 h-8'&gt;
            &lt;button onClick={toggleSideBar}&gt;&lt;/button&gt;
            &lt;div className={containerClasses}&gt;
              ...
            &lt;/div&gt;
          &lt;/div&gt;
        );
  </code></pre>
  <p>I guess it should be added something with respect to isOpened, when it is closed or opened, tried with <a href="https://tailwindcss.com/docs/transition-property" rel="nofollow noreferrer">Tailwind's transition property</a> but it didn't work out.</p>