4

我在使用 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"

任何想法？

4

3 回答 3

1

通过将 alpine.js 添加到我的应用程序中，我获得了需要 JavaScript 在 esbuild 上使用 Rails 7 的 Tailwind UI 组件。 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 { 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

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-and-your-own-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>
于 2021-12-31T16:40:28.000 回答
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>
于 2021-11-25T04:05:42.927 回答
0

谢谢@Marco，答案在文档中。当你使用 html 时，如果你想让它工作，你需要编写你的自定义 JS

于 2022-01-07T10:35:55.140 回答