今天就是這一天 — 我們剛剛發布了 Catalyst 的第一個開發預覽版，正好趕上您的假期程式設計時光。
Catalyst 是我們第一個完全元件化、內含所有功能的應用程式 UI 套件 — 真正的 React 元件，具有經過深思熟慮的 API，這些 API 彼此建構，以創建真實的元件架構，就像我們在真實應用程式中所做的一樣。
查看 線上演示，閱讀文件，如果您是 Tailwind UI All-Access 客戶，請下載它，並立即在新專案中試用。
Catalyst 目前處於開發預覽階段，還有很多功能即將推出，但我們今天發布它，讓您可以在我們繼續建立新元件並找到使其成為更好體驗的方法時立即開始使用。
您的元件，不是我們的
透過 Catalyst，我們著手建立一個 UI 套件，讓未來的 Stripe 或 Linear 樂於使用它來建構他們的產品 — 注重設計的團隊想要擁有自己的 UI 元件，絕不會選擇現成的函式庫。
因此，它不是您安裝的依賴項，而是您下載原始碼並將元件複製到您自己的專案中，這些元件將成為您自己元件系統的起點。
想要更改按鈕的邊框半徑嗎？只需打開 button.tsx 並更改一些類別即可。您無需開啟 GitHub 問題並嘗試說服我們公開新的配置選項。
Catalyst 是一個「消失的 UI 套件」— 在您安裝它六個月後，您幾乎應該忘記它不是您建立的原始元件。
設計在細節中
在這樣的專案中獲得正確的視覺風格很困難。我們在開始時設定了一些目標
- 具有競爭力 — 我們想要設計出可以與當今網路上一些最好的介面相提並論的東西。
- 經得起時間考驗 — 我們不希望設計出在 6 個月後看起來過時的東西，因為它過於傾向特定的趨勢。
- 富有成效 — 我們設計的任何東西都需要讓實際使用者感覺快速高效，而不僅僅是在 Dribbble 截圖中看起來很棒。
這需要大量的工作，並且為了平衡而做了許多權衡，但我真的很喜歡我們最終的結果
為了具有競爭力，我們投入了許多細節，例如下拉式選單上的微妙背景模糊、完善表單控制項上陰影和邊框彼此融合的方式，以及在對話方塊和切換開關等事物中深思熟慮地使用動畫。
為了經得起時間考驗，我們試圖在扁平化和擬物化設計之間取得適當的平衡，並具有足夠的深度提示，即使趨勢在任何一個方向上略有變化，我們的元件看起來仍然很棒。
我們也從瀏覽器中汲取靈感，並使用不帶主觀色彩的藍色焦點環，以避免選擇可能很快看起來過時的處理方式。
為了富有成效，我們仔細地工作以確保仍然有足夠的空白空間，但 UI 仍然足夠密集，可以在螢幕上容納大量資訊。
我們也將過場效果和動畫的使用限制在感覺重要的地方，即使在這種情況下也嘗試使其快速，這樣您永遠不會覺得自己正在等待 UI。
Catalyst 還支援完整的深色模式，並且您使用 Catalyst 元件建立的任何內容都會自動在淺色和深色模式之間調整。
這不是很明顯，但我們必須更改許多小細節才能使內容在深色模式下看起來最佳，例如調整陰影、將外環更改為內環以模仿光線的變化等等。
模仿 HTML
我們花費了大量時間研究元件 API，努力使事情真正容易上手並立即使用，同時又不犧牲彈性。
UI 函式庫通常使用如下的 API
function Example() { return ( <TextField name="product_name" label="Product name" description="Use the name you'd like people to see in their cart." /> );}但是，由於所有屬性都位於同一個元件上，因此開始難以執行諸如僅將類別添加到 <input> 元素本身之類的操作。
最終，這引導我們使用與 HTML 非常相似的 API，在 HTML 中，單個元件很少呈現多個元素。
例如，使用 Catalyst 建立文字欄位如下所示
import { Description, Field, Label } from "@/components/fieldset";import { Input } from "@/components/input";function Example() { return ( <Field> <Label>Product name</Label> <Description>Use the name you'd like people to see in their cart.</Description> <Input name="product_name" /> </Field> );}透過像這樣保持事物可組合，可以很容易地執行諸如限制輸入的寬度，而不會限制任何其他元素的寬度之類的操作
import { Description, Field, Label } from "@/components/fieldset";import { Input } from "@/components/input";function Example() { return ( <Field> <Label>Product name</Label> <Description>Use the name you'd like people to see in their cart.</Description> <Input name="product_name" /> <Input name="product_name" className="max-w-sm" /> </Field> );}這也使得將描述移到輸入下方而不是上方變得容易
import { Description, Field, Label } from '@/components/fieldset'import { Input } from '@/components/input'function Example() { return ( <Field> <Label>Product name</Label> <Description>Use the name you'd like people to see in their cart.</Description> <Input name="product_name" className="max-w-sm" /> <Description>Use the name you'd like people to see in their cart.</Description> </Field> )}我們花費了大量的實驗來弄清楚使這些 API 正常運作的正確方法，尤其是在諸如將佈局樣式添加到正確的子項之類的細節方面，但是回報是值得的，這些元件真的很令人愉快。
由下一代 Headless UI 提供支援
我們在 2020 年夏天發布了 Headless UI 的第一個版本，但由於我們一直專注於 Tailwind CSS 本身，因此距離上一個重大功能版本已經一年多了。
Catalyst 是讓我們再次接觸 Headless UI 的絕佳藉口，我們很快就發現了許多改進專案以簡化 Catalyst 本身程式碼的方法。
我們剛剛發布了 Headless UI v2.0.0-alpha.1，其中包括大量新內容
- 內建錨點定位 — 使用 Floating UI，像是
Menu、Listbox等元件現在可以自動將其彈出視窗定位於觸發器，並根據視窗的變化進行調整。 - 無頭 (Headless) 核取方塊元件 — 我們新增了一個無頭
Checkbox元件，以補充現有的RadioGroup元件，讓建立完全客製化的核取方塊控制項變得更容易。 - HTML 表單元件 — 我們新增了
Input、Select、Textarea、Label、Description、Fieldset和Legend元件，這些元件處理將表單欄位連結在一起所需的所有 ID 生成和aria-*屬性映射。 - 改進的懸停和焦點可見偵測 — 底層使用來自超棒的 React Aria 函式庫的 Hook，Headless UI 現在為您的控制項新增更智慧的
data-hover和data-focus屬性，這些屬性在不同裝置上的行為比原生虛擬類別更一致。 - 組合框 (Combobox) 列表虛擬化 — 新版本的 Headless UI 現在可以處理大量的組合框選項列表，而不會產生效能問題。
... 還有許多其他改進即將推出，包括日期選擇器、工具提示等等。
這些改進目前在此早期 Alpha 階段僅適用於 React，但我們計劃在標記 v2.0 之前將所有這些改進也帶給 Vue。
我們很快就會發布這些內容的文件，但即使這意味著 Headless UI 文件會晚幾天發布，我們也迫不及待地想在假期前推出 Catalyst。
試用看看
Catalyst 是所有 Tailwind UI All-Access 客戶的免費更新，您可以下載它並立即開始使用此第一個版本。
為了讓今天發布的所有內容都恰到好處，我們投入了超乎您想像的心力，但我們渴望獲得回饋以及可以改進的方法，所以請用它來建立一些東西，並告訴我們您的想法。
我們將在假期期間休息幾個星期，但我們將在新的一年回到 Catalyst，開發新的元件，例如應用程式佈局、組合框、命令調色盤、工具提示等等。