Tailwind UI：现在支持 React 和 Vue

去年我们发布了 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">使用设置</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 示例，并完全更改其中的所有内容，从边框半径到填充、再到盒阴影和字体大小，只需像往常一样添加实用类即可。

开始使用

如果您已经是 Tailwind UI 的客户，所有这些内容今天都可以作为完全免费的更新使用。只需登录您的账户，在任何组件上方的下拉菜单中选择 HTML、React 或 Vue，即可获取您想要格式的代码。

如果您还没有查看过 Tailwind UI，可以浏览免费预览组件，以了解它是如何工作的。这是一个在新的副项目构思上快速行动的绝佳工具，可以为您在工作中需要构建的新功能寻找灵感，或者学习如何用 Tailwind 实现特定的小 UI 技巧，同时也是支持我们在开源项目（如 Tailwind CSS、Headless UI 和 Heroicons）上的工作的好方法。

想要查看吗？ 访问 Tailwind UI 网站 →