Dropdown menu inside sidebar using Tailwind CSS

Question

I'm learning TailwindCSS, as it seems to be more advance than Bootstrap.

I've this html template, that has a Sidebar. I'd like that when users click each Part-{n}, it shows the inner parts of the content.

Note: In my html Parts are called Capítulos (Chapters in spanish).

In other words, I'd like to replicate this:

Codepen:

https://codepen.io/ogonzales/pen/WNQMyXJ

<div class="w-full md:w-1/5 bg-gray-900 md:bg-gray-900 px-2 text-center fixed bottom-0 md:pt-8 md:top-0 md:left-0 h-16 md:h-screen md:border-r-4 md:border-gray-600">
    <div class="md:relative mx-auto lg:float-right lg:px-6">
     <ul class="list-reset flex flex-row md:flex-col text-center md:text-left">
        <li class="mr-3 flex-1">
           <a  href="/" class="block py-1 md:py-3 pl-1 align-middle text-gray-800 no-underline border-b-2 border-gray-800 md:border-gray-900">&emsp;&emsp;<img src="{% static 'images/logo.png' %}" width="100%"
                height="100%"></a>
        </li>  
       </ul>
    </div>
 </div>

Answer 1

Bootstrap that You are referring to is CSS framework with extra JavaScript (using jQuery) scripts for modals, dropdowns, and collapses (that You are trying to get right now).

Tailwind is in other hand "just" CSS framework without any JS.

Also opposite to Bootstrap (or Bulma or any other similiar framework) is does not contain any components like buttons, inputs etc. So there is also no ready to use "collapse" component. Instead it is used just for styling from scratch, just like with plain CSS.

Unlike many other CSS frameworks, Tailwind doesn't include any component classes like form-input, btn, card, or navbar.

Tailwind is a CSS framework for implementing custom designs, and even a component as simple as a button can look completely different from one site to another, so providing opinionated component styles that you'd end up wanting to override anyways would only make the development experience more frustrating.

Source: https://tailwindcss.com/components

Collapsing menu that You are trying to achieve requires some scripting (JS) to work. Because I do not know it You are using jquery or some JS framework, I cannot give you any ready to use example. But it actually has nothing to do with Tailwind itself. It is just hiding/displaying some element after clicking in another element. It is logic that can be achieved with any JS framework or plain JS, depends what You need.

If you are using for example Vue framework which will work great with Tailwind, then You can use conditional rendering ( https://v2.vuejs.org/v2/guide/conditional.html ) but like I said it has nothing to do with Tailwind itself so there is no point to give Vue examples in this Tailwind related question.

Answer 2

If you want to achieve this with tailwind the easiest approach is to use alpine js to toggle.

You can find more information and download that library on: https://github.com/alpinejs/alpine