去年我们发布了 Tailwind UI —— 一个由专业设计的使用 Tailwind CSS 构建的庞大 UI 示例目录。直到现在，Tailwind UI 中的所有示例都是纯 HTML，这是所有网页开发者都能使用的最低通用标准，也使这些示例可以适配任何模板语言或 JavaScript 框架。
今天，我们很高兴地宣布，Tailwind UI 中的所有示例均已支持 React 和 Vue 3，这使得它们更容易在你的项目中应用。
🌐 Today we’re excited to add first class support for React and Vue 3 to all of the examples in Tailwind UI, which makes it even easier to adapt them for your projects.
这一路走来很漫长，但我对我们最终的成果非常自豪，并且真的认为这将使 Tailwind UI 成为一群新的 Tailwind CSS 用户的有用工具。
功能强大且易于访问(Functional and accessible)
Tailwind UI 中的所有 React 和 Vue 示例都是由 Headless UI 提供支持的，Headless UI 是我们开发的一个组件库，用于将构建复杂组件（如模态框和下拉菜单）所需的所有复杂 JS 行为与实际样式和标记分离开来。
Headless UI 为你处理所有 ARIA 属性管理、键盘交互、焦点处理等，这意味着 Tailwind UI 提供的所有 React 和 Vue 示例都是完全可用的，无需你自己编写任何复杂的 JS 代码。所有这些棘手的复杂性都被安全地放在你的 node_modules 文件夹中，我们可以代表你进行改进和修复错误，而你无需修改自己的代码。
🌐 Headless UI handles all of the ARIA attribute management, keyboard interactions, focus handling, and more for you, meaning all of the React and Vue examples provided in Tailwind UI are fully functional, with no need to write any of that complex JS stuff yourself. All of that gnarly complexity is safely tucked away in your node_modules folder where we can make improvements and fix bugs on your behalf, without you ever having to change your own code.
完全可定制(Fully customizable)
使用 Headless UI，我们成功地抽象掉了所有复杂的 JavaScript 功能，同时不会影响对实际标记的控制。这意味着整个设计仍然完全由你掌控。
🌐 With Headless UI, we’ve managed to abstract away all of the complicated JS functionality without taking away any control over the actual markup. That means that the entire design is still in entirely under your control.
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 shadow ring-0 transition duration-200 ease-in-out", )} /> </Switch> );}你可以从 Tailwind UI 复制一个 React 或 Vue 示例，并更改其中的所有内容，从边框半径、内边距、盒子阴影到字体大小，只需像以前一样添加工具类即可。
🌐 You can copy a React or Vue example from Tailwind UI and change absolutely everything about it, from the border radius to the padding to the box shadows to the font-size, all by simply adding utility classes like you’re used to.
开始(Get started)
如果你已经是 Tailwind UI 的客户，所有这些内容今天就可以作为完全免费的更新提供给你。只需登录你的账户，在任何组件上方的下拉菜单中选择 HTML、React 或 Vue，然后以你想要的格式获取代码即可。
🌐 If you’re already a Tailwind UI customer, all of this stuff is available to you today as a totally free update. Just log into your account, select between HTML, React, or Vue in the dropdown above any component, and grab the code in the format you want.
如果你还没有查看过 Tailwind UI，可以浏览免费的预览组件，感受一下它的整体运作方式。它是一个非常棒的工具，可以帮助你在新的副项目想法上快速推进，寻找构建工作中所需新功能的灵感，或者学习如何使用 Tailwind 实现某个特定的小型 UI 技巧，同时也是支持我们开展开源项目（如 Tailwind CSS、Headless UI 和 Heroicons）工作的好方法。
🌐 If you haven’t checked out Tailwind UI yet, browse the free preview components to get a feel for how it all works. It’s an awesome tool for moving fast on a new side-project idea, finding inspiration for a new feature you need to build at work, or learning how to implement a specific little UI trick with Tailwind, and a great way to support our work on open-source projects like Tailwind CSS, Headless UI, and Heroicons.
想查看一下吗？ 访问 Tailwind UI 网站 →