去年我們發布了 Tailwind UI — 一個使用 Tailwind CSS 建構的專業設計 UI 範例的龐大目錄。到目前為止，Tailwind UI 中的所有範例都是純 HTML，這對所有網頁開發人員來說是一種最低公分母，並且可以將它們適應於任何模板語言或 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">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 ring-0 shadow 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 網站 →