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 提供支持，这是一个我们开发的组件库，用于将构建复杂组件（如模态和下拉菜单）所需的所有复杂 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 flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
      )}
    >
      <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 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
        )}
      />
    </Switch>
  )
}

您可以从 Tailwind UI 中复制 React 或 Vue 示例，并对其进行任何更改，从边框半径到填充、阴影到字体大小，只需添加您习惯使用的实用程序类即可。

开始使用

如果您已经是 Tailwind UI 的用户，所有这些功能都可作为完全免费的更新提供给您。只需登录您的帐户，在任何组件上方的下拉菜单中选择 HTML、React 或 Vue，然后以您想要的格式获取代码。

如果您还没有尝试过 Tailwind UI，请浏览免费预览组件，感受它的工作原理。它是一个很棒的工具，可以帮助您快速完成新的副项目想法，找到构建新功能的灵感，或者学习如何使用 Tailwind 实现特定的 UI 技巧，也是支持我们开源项目（如 Tailwind CSS、Headless UI 和 Heroicons）工作的好方法。

想要尝试一下吗？访问 Tailwind UI 网站 →

Tailwind UI：现在支持 React + Vue

​功能性和可访问性

​完全可定制

​开始使用

功能性和可访问性

完全可定制

开始使用