Ruby on Rails で Tailwind 要素を使用すると Javascript が機能しない

概要

新しい Rails new my-app –css tailwind 構文を使用して、TailwindCSS で新しい Rails 7 プロジェクトを開始しました。 Tailwind CSS は適切に機能しています。 tailwind 要素からナビゲーションバーを追加したかったので、https://tailwind-elements.com/quick-start/ の手順に従いました。ナビゲーションバーの CSS は機能しますが、サブメニューの開閉（すべて JavaScript によって実行されていると思われます）は機能しません。

詳細を調べると、rails のログに次の行が表示されます。

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.cs の編集を行いました。何が足りないのでしょうか?私が気づいていない Ruby on Rails との競合はありますか?本当にルートを作成する必要があるのでしょうか、それとも何かが正しくインストールされていないことを示していますか?

ここに <%= render ‘layouts/navigation’ %>

<%= yield %>

import 'tw-elements' を入れて代替ステップ 4 を試してみました。 app/javascript/controllers.index.js にありますが、何も機能しません。

## 解決策
==== 編集 ====

更新するために戻ってきました - 実際に Rails に tailwind をインストールするためのページがあり、それは正常に機能します:)

==== 編集終了 ====

同じ問題が発生し、解決策をここに投稿しました。

tailwind 要素のセットアップのステップを完了したら、最後のステップ (script タグ) の代わりに次のようにします。

Rails.application.config.assets.paths << Rails.root.join(‘node_modules/tw-elements/dist/js’) Rails.application.config.assets.precompile += %w( tailwind.css tw-elements.umd.min.js )

//= require tw-elements.umd.min

<%= javascript_include_tag 'tw-elements.umd.min', 'data-turbolinks-track': 'reload', type: "module" %>

``` 解決策はこの投稿に基づいていました。

お役に立てれば！