去年我们发布了 Tailwind UI —— 一个使用 Tailwind CSS 构建的专业设计 UI 示例库。到目前为止，Tailwind UI 中的所有示例都是纯 HTML 格式，这可以说是所有 Web 开发人员的最低公约数，使其可以适配任何模板语言或 JavaScript 框架。
今天我们很高兴地宣布为 Tailwind UI 中的所有示例添加了对 React 和 Vue 3 的一流支持，这使得在您的项目中使用它们变得更加容易。
这是一段漫长的旅程，但我为我们最终达到的成果感到非常自豪，我真的认为这将使 Tailwind UI 成为一个全新用户群体的实用工具。
功能性和可访问性
Tailwind UI 中的所有 React 和 Vue 示例都由 Headless UI 提供支持。这是我们开发的一个组件库，用于将构建模态框和下拉菜单等复杂组件所需的所有复杂 JS 行为与实际样式和标记解耦。
Headless UI 为您处理了所有的 ARIA 属性管理、键盘交互、焦点处理等功能，这意味着 Tailwind UI 中提供的所有 React 和 Vue 示例都是完全功能性的，无需自己编写任何复杂的 JS 代码。所有这些复杂的逻辑都安全地存放在您的 node_modules 文件夹中，我们可以进行改进和修复 bug，而无需您更改自己的代码。
完全可定制
通过 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 网站 →