Tailwind UI：现已支持 React + Vue

去年我们发布了 Tailwind UI - 一个使用 Tailwind CSS 构建的专业设计 UI 示例的庞大目录。到目前为止，Tailwind UI 中的所有示例都是纯 HTML 编写的，这可以说是所有 Web 开发者的最低标准，因此可以将它们适配到任何模板语言或 JavaScript 框架。

¥Last year we released Tailwind UI — a huge directory of professionally designed UI examples built with Tailwind CSS. Up until now, all of the examples in Tailwind UI have been pure HTML which is sort of the lowest common denominator for all web developers, and makes it possible to adapt them to any templating language or JavaScript framework.

今天，我们很高兴地宣布，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.

虽然已经是 a long journey 了，但我对我们最终的成果感到非常自豪，并且真心相信它将使 Tailwind UI 成为新一代 Tailwind CSS 用户的有效工具。

¥It’s been a long journey but I am super proud of where we ended up on this one, and really think it’s going to make Tailwind UI a useful tool for a whole new group of Tailwind CSS users.

功能强大且易于访问(Functional and accessible)

¥Functional and accessible

Tailwind UI 中的所有 React 和 Vue 示例均由 Headless UI 提供支持。Headless UI 是我们开发的组件库，旨在将构建复杂组件（例如模态框和下拉菜单）所需的所有复杂 JS 行为与实际样式和标记分离。

¥All of the React and Vue examples in Tailwind UI are powered Headless UI which is a library of components we developed to decouple all of the complicated JS behavior you need to build complex components like modals and dropdowns from the actual styles and markup.

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)

¥Fully customizable

借助 Headless UI，我们成功地抽象出了所有复杂的 JS 功能，同时又不剥夺对实际标记的任何控制。这意味着整个设计仍然完全由你掌控。

¥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)

¥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.

想要尝试一下吗？Visit the Tailwind UI website →

¥Want to check it out? Visit the Tailwind UI website →