In TailwindCSS are you expected to write your own JS to make mobile menus work?-CodePudding

I'm new to using TailwindCSS and have come from a Bootstrap (v3, 4 and 5) background.

I've had a read over the Tailwind docs and notice on many sites that are built with it - including the Tailwind website itself - they feature mobile navigation menus with the "hamburger" icon which toggles their visibility depending on the viewport.

In Bootstrap this can be achieved because Bootstrap comes with JavaScript which can be used to render a hamburger icon that toggle a <nav> based on the viewport: https://getbootstrap.com/docs/5.0/components/navbar/#responsive-behaviors

My understanding of Tailwind is that it does not have any equivalent JavaScript and it purely deals with generating CSS. It does this by an npx script running, scanning your templates for classes, and then generating an "output" CSS file as per https://tailwindcss.com/docs/installation. Is this correct, i.e. does Tailwind only deal with the CSS portion of a project and completely omit frontend JavaScript (even though it uses JavaScript itself to do it's work)?

I came across Flowbite. Given I've never used this before I tried what's on https://flowbite.com/docs/components/navbar/ and then got an error saying Collapse wasn't defined after using their example new Collapse(targetEl);. I understand why this is happening, because there's no code in my project which defines Collapse in the first place. My understanding is Flowbite is separate to Tailwind so I'd have to set that up separately in order to get any of this working.

I appreciate Bootstrap and Tailwind have a very different approach, but my question is - in Tailwind is my understanding correct that you'd effectively need to "roll your own" JavaScript (or use a third party framework such as the Flowbite example) in order to make a responsive navigation menu that can be toggled with a hamburger button? If it's possible in pure CSS can somebody point to an example of where this is documented because there's nothing about it in the Tailwind docs as far as I can see.

CodePudding user response：

Is this correct, i.e. does Tailwind only deal with the CSS portion of a project and completely omit frontend JavaScript (even though it uses JavaScript itself to do it's work)?

Yes. Tailwind is a CSS framework only.

you'd effectively need to "roll your own" JavaScript (or use a third party framework such as the Flowbite example) in order to make a responsive navigation menu that can be toggled with a hamburger button?

Yes. Luckily, these days doing something like that could be about as difficult as

document.getElementById("#my-menu").classList.toggle("visible");

but the Tailwind site itself does things a bit differently since it's a Next.js (React) site.