Rails 7 + ImportMaps/whatever + TailwindCSS + JS = Boggled答案

【问题标题】：Rails 7 + ImportMaps/whatever + TailwindCSS + JS = BoggledRails 7 + ImportMaps/whatever + TailwindCSS + JS = Boggled
【发布时间】：2023-01-24 07:15:12
【问题描述】：

首先，我更像是一个 Rails 后端人员。今天的 JS 世界让我害怕。我知道这是一个超级基本的问题，但我已经绞尽脑汁地想了几天figure、this out。我不知道为什么我不能在我的 HTML 中的某处放置 CDN 链接并获得我需要的所有 JS。那是过去的好日子...

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

宝石文件包含gem "tailwindcss-rails", "~> 2.0" # github: "rails/tailwindcss-rails"

应用程序/资产/样式表/application.tailwind.css:

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

应用程序/资产/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???

配置/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'),
//   ]
// }

我还需要把什么放在哪里才能让它工作？谢谢你填补了我大脑中缺失的部分。

【问题讨论】：

在我们仍然使用 web packer 的应用程序中，我们在 application.js 中有这个：import "stylesheets/application.scss" 并且我们的 application.scss 包括您的 application.tailwind.css 的内容等

标签： ruby-on-rails tailwind-css ruby-on-rails-7 tailwind-ui import-maps

【解决方案1】：

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

因此，Tailwind UI 提供了 3 种变体的组件：HTML、React 和 Vue。如果选择 HTML，则必须弄清楚如何编写自己的 JavaScript。 mdegoys 提到了这一点，但内心却投了反对票。不过，我会详细说明这一点。

除了在他们的网站上提到“做你自己的 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 应该非常简单。

【讨论】：

【解决方案2】：

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

由 React 和 Vue 提供支持的易于访问的交互式示例无头 UI，如果您愿意编写任何必要的 JS，还可以使用 vanilla HTML 你自己。

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

【讨论】：