Soy nuevo en el uso de TailwindCSS y vengo de un entorno Bootstrap (v3, 4 y 5).
Leí los documentos de Tailwind y noté que en muchos sitios que se construyeron con él, incluido el sitio web de Tailwind, cuentan con menús de navegación móvil con el ícono de "hamburguesa" que alterna su visibilidad según la ventana gráfica.
En Bootstrap, esto se puede lograr porque Bootstrap viene con JavaScript que se puede usar para representar un ícono de hamburguesa que alterna un <nav> basado en la ventana gráfica: https://getbootstrap.com/docs/5.0/components/navbar/#responsive- comportamientos
Mi entendimiento de Tailwind es que no tiene ningún JavaScript equivalente y se trata únicamente de generar CSS. Lo hace mediante la ejecución de un script npx , escaneando sus plantillas en busca de clases y luego generando un archivo CSS de "salida" según https://tailwindcss.com/docs/installation . ¿Es esto correcto, es decir, Tailwind solo se ocupa de la parte CSS de un proyecto y omite por completo el JavaScript frontend (aunque usa JavaScript para hacer su trabajo)?
Me encontré con Flowbite. Dado que nunca he usado esto antes, probé lo que hay en https://flowbite.com/docs/components/navbar/ y luego recibí un error que decía que Collapse no estaba definido después de usar su ejemplo new Collapse(targetEl); . Entiendo por qué sucede esto, porque no hay ningún código en mi proyecto que defina Collapse en primer lugar. Tengo entendido que Flowbite está separado de Tailwind, por lo que tendría que configurarlo por separado para que todo esto funcione.
Aprecio que Bootstrap y Tailwind tengan un enfoque muy diferente, pero mi pregunta es: en Tailwind, entiendo que es correcto que efectivamente necesitaría "hacer rodar su propio" JavaScript (o usar un marco de trabajo de terceros como el ejemplo de Flowbite) para hacer un menú de navegación receptivo que se pueda alternar con un botón de hamburguesa? Si es posible en CSS puro , ¿alguien puede señalar un ejemplo de dónde se documenta esto porque, por lo que puedo ver, no hay nada al respecto en los documentos de Tailwind?
¿Es esto correcto, es decir, Tailwind solo se ocupa de la parte CSS de un proyecto y omite por completo JavaScript frontend (aunque usa JavaScript para hacer su trabajo)?
Sí. Tailwind es solo un marco CSS.
¿necesitaría efectivamente "hacer rodar su propio" JavaScript (o usar un marco de trabajo de terceros como el ejemplo de Flowbite) para crear un menú de navegación receptivo que se pueda alternar con un botón de hamburguesa?
Sí. Afortunadamente, en estos días hacer algo así podría ser tan difícil como
document.getElementById("#my-menu").classList.toggle("visible");pero el sitio de Tailwind en sí mismo hace las cosas de manera un poco diferente , ya que es un sitio de Next.js (React).