I want the sidebar to gracefully disappear into the side (animate) when I toggle, (unfortunately, I don't think the sandbox supports javascript). Currently, the two-class values are:

expanded: 'w-1/4'
hidden: 'w-0 invisible'

But the w-0 doesn't set the sidebar to width-0px, it is still visible hence why I added the 'invisible' class as well.

Also, I don't want the ponents to shuffle around as the sidebar gets smaller, I want it to slide in from the side without the ponents reacting to the size (if that makes sense)

I'm new to Tailwind-CSS so any help would be appreciated.

<!-- Tailwind -->
<link href="@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div class='p-5'>
  <div class="flex flex-row-reverse">
    <div class='h-screen p-7 duration-300 w-1/4 bg-indigo-500' }>
      Sidebar

    </div>
    <div class='w-full'>
      <div>
        Header Bar
      </div>
      <main>
        Main Content
        <br>
        <button id='toggle-sidebar' class='px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out'>Toggle Sidebar</button>
      </main>
    </div>
  </div>
</div>

I want the sidebar to gracefully disappear into the side (animate) when I toggle, (unfortunately, I don't think the sandbox supports javascript). Currently, the two-class values are:

expanded: 'w-1/4'
hidden: 'w-0 invisible'

But the w-0 doesn't set the sidebar to width-0px, it is still visible hence why I added the 'invisible' class as well.

Also, I don't want the ponents to shuffle around as the sidebar gets smaller, I want it to slide in from the side without the ponents reacting to the size (if that makes sense)

I'm new to Tailwind-CSS so any help would be appreciated.

<!-- Tailwind -->
<link href="https://unpkg./tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div class='p-5'>
  <div class="flex flex-row-reverse">
    <div class='h-screen p-7 duration-300 w-1/4 bg-indigo-500' }>
      Sidebar

    </div>
    <div class='w-full'>
      <div>
        Header Bar
      </div>
      <main>
        Main Content
        <br>
        <button id='toggle-sidebar' class='px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out'>Toggle Sidebar</button>
      </main>
    </div>
  </div>
</div>

I've created the following sandbox to demonstrate here.

• javascript
• html
• css
• tailwind-css

Share Improve this question Follow edited Jul 11, 2022 at 20:49 Lee Taylor 7,9841616 gold badges3737 silver badges5353 bronze badges asked Jul 11, 2022 at 10:05 Richard BridgeRichard Bridge 38822 gold badges55 silver badges1616 bronze badges 3

• You only specified the transition duration, not that it transitions at all. so add "transition-all" to the classname of the sidebar. and then when you add the functionality to toggle, it should transition between widths. – Dean Commented Jul 11, 2022 at 10:12
• Please add your code as a minimal reproducible example (Ctrl+M or <>-Button) instead of leading to a Sandbox. Questions must be self-containing without relying on external resources. Then do not post the code at the beginning of the question. It will not help others to find your question when searching for it as the search engine then only crawls the first few parts which would then be code lines. I edited the question for you to meet those guidelines. – tacoshy Commented Jul 11, 2022 at 11:12
• @Dean I added transition all but the sidebar is still there. If you remove the 'invisible' class you can see that the width doesn't get set to 0px so there is still some of the sidebar visible – Richard Bridge Commented Jul 11, 2022 at 12:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

The official TailwindUI ponents has a free snippet for that: here
You can omit the backdrop part, the important code you need to animate is the translate-x class that needs to be applied/removed from the panel itself with a transition effect.