Ruby on Rails集成Tailwind Elements时JavaScript功能失效排查

问题详情 #

通过rails new my-app --css tailwind创建Rails 7项目，Tailwind CSS功能正常。添加Tailwind Elements导航栏后，样式生效但子菜单展开/收起功能无法使用。服务器日志显示路由错误：

Started GET "/TW-ELEMENTS-PATH/dist/js/index.min.js" for 127.0.0.1 at 2023-02-02 09:13:48 -0600

ActionController::RoutingError (No route matches [GET] "/TW-ELEMENTS-PATH/dist/js/index.min.js"):

已完成操作：

• 执行npm install tw-elements
• 修改tailwind.config.js
• 尝试在app/javascript/controllers/index.js添加import 'tw-elements';但无效果

当前application.html.erb中手动添加了无效的script标签：

<!DOCTYPE html>
<html>
<head>
    <title>MyApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind" , "inter-font" , "data-turbo-track" : "reload" %>
    <%= stylesheet_link_tag "application" , "data-turbo-track" : "reload" %>
    <%= javascript_importmap_tags %>
    <!-- 无效的引入语句 -->
    <script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
</head>
<body>
    <%= render 'layouts/navigation' %>
    <main class="container mx-auto mt-28 px-5 flex">
        <%= yield %>
    </main>
</body>
</html>

修复步骤 #

1. 移除无效的Script标签 #

TW-ELEMENTS-PATH是官方文档的占位符，并非实际文件路径，直接引用会触发路由错误。删除application.html.erb中手动添加的<script>标签。

2. 配置Importmap管理依赖 #

Rails 7默认使用Importmap管理前端包，无需手动引入本地JS文件：

• 执行命令将tw-elements注册到Importmap：

  bin/importmap pin tw-elements
  

• 在app/javascript/application.js中添加导入：

  import "tw-elements"
  

3. 初始化组件（关键步骤） #

Tailwind Elements的交互组件需要手动初始化，结合Rails Turbo的页面加载机制，在app/javascript/controllers/application_controller.js中添加：

import { Controller } from "@hotwired/stimulus"
import { initTE } from "tw-elements";

export default class extends Controller {
  connect() {
    initTE({ Dropdown: true }); // 按需初始化需要的组件，比如Dropdown
  }
}

或者在全局JS文件中监听Turbo事件：

import { initTE } from "tw-elements";

document.addEventListener('turbo:load', () => {
  initTE({ Dropdown: true });
});

4. 验证Tailwind配置正确性 #

确保tailwind.config.js包含tw-elements的资源路径和插件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{html,erb,js}",
    "./node_modules/tw-elements/dist/js/**/*.js" // 必须添加这行
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tw-elements/dist/plugin.cjs")],
}

5. 重启服务器 #

修改配置后重启Rails服务器，确保所有更改生效：

rails s

内容的提问来源于stack exchange，提问作者wruckie