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

Question

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

Rails 7.0.0.alpha2 红宝石 3​​.0.2p107 "@tailwindcss/ui": "^0.7.2"

有什么想法吗？

Answer 1

我不确定我是否完全理解您的问题，但我遇到了同样的问题。我解决它的方法是使用刺激 js 顺风组件将 Javascript 添加到元素中。

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

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

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

yarn add tailwindcss-stimulus-components

或

npm install tailwindcss-stimulus-components

然后只需将 data-controller、data-action 和 data-target 添加到您需要的元素中：

<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>