Tailwind UI：现在支持 React + Vue

去年我们发布了 Tailwind UI —— 一个包含大量专业设计的 UI 示例的目录，这些示例使用 Tailwind CSS 构建。到目前为止，Tailwind UI 中的所有示例都是纯 HTML，这在所有 Web 开发者中是最基本的，并且可以使它们适应任何模板语言或 JavaScript 框架。

今天，我们很高兴为 Tailwind UI 中的所有示例添加对 React 和 Vue 3 的一流支持，这使得它们更容易适应您的项目。

这是一个漫长的旅程，但我为我们最终取得的成果感到非常自豪，并且真的认为这将使 Tailwind UI 成为对 Tailwind CSS 用户群体非常有用的工具。

功能性和可访问性

Tailwind UI 中的所有 React 和 Vue 示例均由 Headless UI 提供支持，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 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 网站 →