如何在rails应用程序中集成tailwindui JS

Question

我使用 esbuild 在 Rails 7 上。我正在使用 tailwindUI。仅使用 css 组件时它可以正常工作。当一个组件使用 JS 时，它就不再起作用了。例如，下拉菜单默认打开，我无法关闭它。我在 tailwind.config.js 中添加了 require('@tailwindcss/ui')

Rails 7.0.0.alpha2 ruby​​ 3.0.2p107“@tailwindcss/ui”：“^0.7.2”

任何想法？

Answer 1

我不确定我是否完全理解你的问题，但我也遇到过同样的问题。我解决这个问题的方法是使用stimulus js tailwind组件将Javascript添加到元素中。

我最终不得不为每个元素的类添加一个“隐藏”标签，以确保由于 HTML 和 JS 渲染之间的延迟时间而加载页面时它不会在屏幕上闪烁。

您可以在这里找到它们： https ://github.com/excid3/tailwindcss-stimulus-components

这是下拉代码的示例。 如果您安装了刺激，您可以执行以下操作：

yarn add tailwindcss-stimulus-components

或者

npm install tailwindcss-stimulus-components

然后只需将数据控制器、数据操作和数据目标添加到您需要的元素中：

<div class="inline-block text-sm px-4 py-2 leading-none rounded no-underline text-gray hover:text-gray-900 hover:bg-white mt-4 lg:mt-0">
  <div class="relative" data-controller="dropdown">
    <div data-action="click->dropdown#toggle click@window->dropdown#hide" role="button" data-dropdown-target="button" tabindex="0" class="inline-block select-none">
      <span class="appearance-none flex items-center inline-block text-gray-700">
        <% if current_user %>
          <%= image_tag avatar_url_for(current_user), class: "rounded-full h-8 w-8 align-middle" %>
        <% end %>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="h-4 w-4"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
      </span>
    </div>
    <div data-dropdown-target="menu" class="absolute right-0 mt-2 hidden">
      <div class="bg-white shadow rounded border overflow-hidden">
          <%= link_to 'Profile',  edit_user_registration_path, data: {action: "click->dropdown#toggle"}, class: 'no-underline block pl-8 py-3 text-gray-900 bg-white hover:bg-gray-300 whitespace-nowrap' %>
          <%= link_to 'Password', password_path, data: {action: "click->dropdown#toggle"}, class: 'no-underline block px-8 py-3 text-gray-900 bg-white hover:bg-gray-300 whitespace-nowrap' %>
          <%= link_to 'Accounts', user_connected_accounts_path, data: {action: "click->dropdown#toggle"}, class: 'no-underline block px-8 py-3 text-gray-900 bg-white hover:bg-gray-300 whitespace-nowrap' %>
          <%= link_to 'Billing',  subscription_path, data: {action: "click->dropdown#toggle"}, class: 'no-underline block px-8 py-3 text-gray-900 bg-white hover:bg-gray-300 whitespace-nowrap' %>
          <%= link_to 'Sign Out', destroy_user_session_path, method: :delete, data: {action: "click->dropdown#toggle"}, class: 'no-underline block px-8 py-3 border-t text-gray-900 bg-white hover:bg-gray-300 whitespace-nowrap' %>
      </div>
    </div>
  </div>
</div>