去年我们发布了 Tailwind UI — 一个包含大量由 Tailwind CSS 构建的专业设计 UI 示例的目录。到目前为止，Tailwind UI 中的所有示例都是纯 HTML，这可以说是所有 Web 开发人员的最低公分母，并使其能够适应任何模板语言或 JavaScript 框架。
今天，我们很高兴地宣布为 Tailwind UI 中的所有示例添加对 React 和 Vue 3 的一流支持，这将使其更容易适应您的项目。
这是一段 漫长的旅程，但我为我们最终取得的成果感到非常自豪，并且真的认为这将使 Tailwind UI 成为对一大批新的 Tailwind CSS 用户有用的工具。
功能性和可访问性
Tailwind UI 中的所有 React 和 Vue 示例都由 Headless UI 提供支持，这是一个我们开发的组件库，用于将构建复杂组件（如模态框和下拉菜单）所需的所有复杂 JS 行为与实际样式和标记分离。
Headless UI 为您处理所有 ARIA 属性管理、键盘交互、焦点处理等，这意味着 Tailwind UI 中提供的所有 React 和 Vue 示例都是完全可用的，无需自己编写任何复杂的 JS 代码。所有这些棘手的复杂性都安全地隐藏在您的 node_modules 文件夹中，我们可以在其中为您进行改进和修复错误，而您无需更改自己的代码。
完全可定制
借助 Headless UI，我们设法抽象掉了所有复杂的 JS 功能，而没有剥夺对实际标记的任何控制权。这意味着整个设计仍然完全在您的控制之下。
import { useState } from "react";import { Switch } from "@headlessui/react";function classNames(...classes) { return classes.filter(Boolean).join(" ");}export default function Example() { const [enabled, setEnabled] = useState(false); return ( <Switch checked={enabled} onChange={setEnabled} className={classNames( enabled ? "bg-indigo-600" : "bg-gray-200", "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none", )} > <span className="sr-only">Use setting</span> <span aria-hidden="true" className={classNames( enabled ? "translate-x-5" : "translate-x-0", "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white ring-0 shadow transition duration-200 ease-in-out", )} /> </Switch> );}您可以从 Tailwind UI 复制一个 React 或 Vue 示例，并通过简单地添加您习惯的实用程序类来更改它的所有内容，从边框半径到内边距到阴影到字体大小。
开始使用
如果您已经是 Tailwind UI 的客户，那么所有这些内容都可以在今天作为完全免费的更新提供给您。只需登录您的帐户，在任何组件上方的下拉列表中选择 HTML、React 或 Vue，然后以您想要的格式获取代码即可。
如果您还没有查看过 Tailwind UI，请浏览免费预览组件以了解它的工作原理。它是快速启动新的副项目想法，为需要在工作中构建的新功能寻找灵感，或学习如何使用 Tailwind 实现特定的 UI 技巧的绝佳工具，也是支持我们对 Tailwind CSS、Headless UI 和 Heroicons 等开源项目工作的绝佳方式。
想了解一下吗？ 访问 Tailwind UI 网站 →