在 TailwindCSS 中,您是否希望编写自己的 JS 来使移动菜单正常工作?

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

我刚开始使用 TailwindCSS,并且有 Bootstrap(v3、4 和 5)背景。

我已经阅读了 Tailwind 文档并注意到许多使用它构建的网站 - 包括 Tailwind 网站本身 - 它们具有移动导航菜单和“汉堡包”图标,可以根据视口。

在 Bootstrap 中,这是可以实现的,因为 Bootstrap 带有 JavaScript,可用于渲染一个汉堡包图标,该图标根据视口切换 <nav>https://getbootstrap.com/docs/5.0/components/navbar/#responsive-behaviors

我对 Tailwind 的理解是它没有任何等价物 JavaScript,它纯粹处理生成 CSS。它通过 npx 脚本 运行、扫描模板 类,然后根据 https://tailwindcss.com/docs/installation 生成“输出”CSS 文件来完成此操作。这是正确的吗,即 Tailwind 是否只处理项目的 CSS 部分并完全忽略前端 JavaScript(即使它使用 JavaScript 本身来完成它的工作)?

我遇到了 Flowbite。鉴于我在尝试 https://flowbite.com/docs/components/navbar/ 上的内容之前从未使用过它,然后在使用他们的示例 new Collapse(targetEl); 后收到错误消息说 Collapse 未定义。我明白为什么会这样,因为我的项目中没有首先定义 Collapse 的代码。我的理解是 Flowbite 与 Tailwind 是分开的,所以我必须单独设置它才能让它正常工作。

我很欣赏 Bootstrap 和 Tailwind 有一个非常不同的方法,但我的问题是 - 在 Tailwind 中,我的理解是否正确,你实际上需要“自己动手”JavaScript(或使用第三方框架(例如 Flowbite 示例)来制作可以使用汉堡包按钮切换的响应式导航菜单?如果在 pure CSS 中有可能,有人可以指出一个示例,说明它在哪里记录,因为据我所知,Tailwind 文档中没有关于它的任何内容。

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)?

是的。 Tailwind 只是一个 CSS 框架。

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?

是的。幸运的是,现在做这样的事情可能和

一样困难
document.getElementById("#my-menu").classList.toggle("visible");

但是 Tailwind site itself does things a bit differently 因为它是一个 Next.js (React) 站点。