轨道 7 +导入地图/任何东西+ TailwindCSS + JS = 困惑

Question

首先，我更像是一个 Rails 后端人员。今天的 JS 世界让我感到害怕。我知道这是一个非常基本的问题，但我已经绞尽脑汁好几天了，试图图，这个 out。我不知道为什么我不能在 HTML 中的某个位置放置 CDN 链接并获取我需要的所有 JS。那些都是美好的时光……

无论如何，我有一个几乎全新的 Rails 7 应用程序，它使用导入映射（它们都是吗？），我试图从 https://tailwindui.com/preview （该页面的第一个导航栏）工作。它开始弹出打开，没有悬停效果，并且无法关闭。我的目标是使用更多这些组件，但我读过的所有文档似乎都让我觉得缺少一个我不理解的部分。

Gemfile 包含 gem "tailwindcss-rails", "~> 2.0" # github: "rails/tailwindcss-rails"

app/assets/stylesheets/application. tailwind.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

app/assets/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails

// what else needs to go here???

config/tailwind.config.js

// const defaultTheme = require('tailwindcss/defaultTheme')

// module.exports = {
//   content: [
//     './app/helpers/**/*.rb',
//     './app/javascript/**/*.js',
//     './app/views/**/*'
//   ],
//   theme: {
//     extend: {
//       fontFamily: {
//         sans: ['Inter var', ...defaultTheme.fontFamily.sans],
//       },
//     },
//   },
//   plugins: [
//     require('@tailwindcss/forms'),
//     require('@tailwindcss/aspect-ratio'),
//     require('@tailwindcss/typography'),
//   ]
// }

我还需要放置什么才能使其正常工作？谢谢你填补了我大脑中缺失的部分。

Answer 1

我知道你问这个问题已经有一段时间了，但我最近一直在与这个问题作斗争，我想谈谈我的发现，以防有人想知道。

因此，Tailwind UI 提供了 3 种变体的组件：HTML、React 和 Vue。如果您选择 HTML，则必须弄清楚如何编写自己的 JavaScript。 这个答案提到了这一点，但我会详细说明这一点。

除了在他们的网站上提到“做你自己的 JavaScript”之外，他们还向我们提供了在添加 JavaScript 时应该如何设置组件样式的说明：

          <!--
            Dropdown menu, show/hide based on menu state.

            Entering: "transition ease-out duration-100"
              From: "transform opacity-0 scale-95"
              To: "transform opacity-100 scale-100"
            Leaving: "transition ease-in duration-75"
              From: "transform opacity-100 scale-100"
              To: "transform opacity-0 scale-95"
          -->

然而，这并没有真正告诉我们必须编写代码我们自己。当然，我们还缺少一些东西，对吧？事实证明，并非如此。

基本上，布局的“动态”方面是通过 Headless UI 实现的，这是一组开发和开发的组件。由同一个人维护。它只有三个公共包：@headlessui/vue、@headlessui/react 和@headlessui/tailwindcss。

我运行了 npm i @headlessui/tailwindcss 并将 @headlessui/tailwindcss 添加到插件中，但它并没有真正做太多事情。如果您检查该包的源代码，您会发现一个非常小的 index.js 它只添加了一些实用程序类。所以这没有帮助，我不得不刮掉它。

到目前为止，最可行的选择似乎是获取 React 或 Vue 版本的模板并将其集成到您的管道中。否则你将不得不编写一堆 JS 来基本上自己重新实现无头 UI。

我仍在寻找基于 importmap 的解决方案来集成 Vue，而 webpack 应该非常简单。

Answer 2

他们的 HTML 代码中没有 JavaScript。在 TailwindUI 主页上，他们解释道：

React 和 Vue 的可访问、交互式示例，由
无头 UI，如果您愿意编写任何必要的 JS，还可添加普通 HTML
你自己。

所以我想在这种情况下你必须自己编写必要的JS。

Answer 3

我同意你的观点，有一个缺失的部分。我在尝试在使用 创建的新 Rails 7.1 应用程序中安装 daisyUI tailwindcss 插件时一直在解决这个问题-css=tailwind。看起来，要使用这些 tailwind 插件（tailwindui 和 daisyUI），导入映射的默认 javascript 使用是不够的。我可能还遗漏了一些东西，但这些 UI 框架想要通过 JS 包管理器（node、yarn、bun）安装。一旦我切换到bun，我就可以更轻松地让插件工作。

需要：

• 在本地安装 bun （如果不这样做，rails 会尝试回退到yarn）
• 运行 rails new myapp --javascript=bun --css=tailwind

这个答案还提供了更多详细信息，其中包含密钥详细信息是：

要使用任何其他 tailwind 插件，您必须运行完整的 node.js 版本的 tailwind

似乎缺少的部分是 --css=tailwind 所依赖的 >standalone tailwind cli（由 importmaps 处理 JavaScript）和 tailwindcss-rails gem 不再是可行的解决方案作为当你想使用 tailwind 插件时。

也许这已经改变了，或者至少为我们指明了研究如何使用 tailwind cli 解决插件问题的方向，因为它实际上并不是 Rails 的核心问题。