Rails 7 + ImportMaps/其他 + TailwindCSS + JS = 令人困惑

Question

首先，我更像是一个 Rails 后端人员。今天的 JS 世界让我感到害怕。我知道这是一个非常基本的问题，但我已经绞尽脑汁花了好几天的时间试图弄清楚这 一点。我不知道为什么我不能在 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;

应用程序/资产/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'),
//   ]
// }

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

Answer 1

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

\n

\n

由无头 UI 提供支持的 React 和 Vue 的可访问、交互式示例，如果您\xe2\x80\x99d 宁愿自己编写任何必要的 JS，还可添加普通 HTML。

\n

\n

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

\n