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

Question

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

钢轨7.0.0.alpha2红宝石3.0.2p107"tailwindcss/ui"："0.7.2〃；

知道吗？

Answer 1

我不确定我是否完全理解你的问题，但我也遇到过同样的问题。我解决这个问题的方法是使用stimulation-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>

Answer 2

通过在我的应用程序中添加alpine.js，我得到了需要JavaScript的Tailwind UI组件，这些组件可以在esbuild上使用Rails 7。https://alpinejs.dev/start-here

Alpine.js可以用于设置下拉菜单、切换、导航栏等的动画。TailwindUI文档在一些示例代码中使用了它。

您可以通过CDN使用它，也可以作为软件包安装。

如果你将其用作CDN，那么只需将当前版本号放在URL中，并在代码上方添加脚本标记。

<script defer src="https://unpkg.com/alpinejs@3.7.1/dist/cdn.min.js"></script>
<div x-data="{ open: false }">
<button type="button" @click="open = ! open" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Button text
</button>
<div x-show="open" @click.outside="open = false">Contents...</div>
</div>

我选择安装npm包alpinejs和alpine-turbo-drive-adapter，这样我就不必在所有视图中添加脚本标记。在app/javascript/controllers/applications.js中，我添加了import语句。

import { Application } from "@hotwired/stimulus"
import Alpine from 'alpinejs'
import 'alpine-turbo-drive-adapter'
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application
window.Alpine = Alpine
window.Alpine = Alpine  
Alpine.start()
export { application }

另一件需要注意的事情是，您不能像Bootstrap那样将需要JavaScript的TailwindUI组件直接放入代码中。您必须签出TailwindUI代码中的注释，并配置Apline.js来执行它们的建议。

例如，如果您查看"；"简单拨动"；注释说明了要更改哪些内容以启用/禁用切换https://tailwindui.com/components/application-ui/forms/toggles

<!-- This example requires Tailwind CSS v2.0+ -->
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
<button type="button" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
<span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
</button>

如果您签出TailwindUI文档https://tailwindui.com/documentation#using-html和您自己的js，它们给出了一个如何使用alpine.js来实现切换功能的示例。本质上，您只需将x-data属性isOn从true切换为false，即可打开和关闭菜单、下拉菜单等。

<span
x-data="{ isOn: false }"
@click="isOn = !isOn"
:aria-checked="isOn"
:class="{'bg-indigo-600': isOn, 'bg-gray-200': !isOn }"
class="bg-gray-200 relative inline-block flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline"
role="checkbox"
tabindex="0"
>
<span
aria-hidden="true"
:class="{'translate-x-5': isOn, 'translate-x-0': !isOn }"
class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"
></span>
</span>

Answer 3

谢谢@Marco答案在医生那里。当你使用html时，如果你想让它工作，你需要编写自定义JS