tailwind-design-system

此技能為管理 Tailwind CSS v4 的現代設計系統提供了結構化的框架。專為需要在大規模程式碼庫中維護一致性樣式，同時利用最新 CSS 優先功能的前端開發人員與 UI 工程師所設計。透過從傳統設定檔轉向 CSS 原生定義，此技能簡化了標記、主題與複雜 UI 元件的建立過程。它確保您的設計系統在應用程式擴展時，依然保持高效能、高可存取性且易於維護。

• 使用 @theme 指令進行 CSS 優先配置，以取代傳統的 tailwind.config.ts 檔案。

• 使用 OKLCH 色彩空間進行高階語意化顏色標記管理，以改善色彩感知與一致性。

• 支援元件架構，包含用於管理複雜變體與狀態的 CVA (Class Variance Authority)。

• 內建使用原生 @custom-variant 與現代 CSS 功能的深色模式支援。

• 整合至基礎層級的標準化響應式模式與可存取性最佳實踐。

• 在 @theme 定義內直接管理動畫標記與關鍵影格。

• 當啟動新的設計系統專案或將現有 Tailwind v3 程式碼庫遷移至 v4 時，請使用此技能。

• 參考隨附的映射表，快速將傳統 v3 模式（如主題擴展或深色模式類別策略）轉換為現代 v4 的對應項。

• 遵循提供的架構，定義從品牌、語意到元件專用變數的標記階層。

• 應用推薦的 CVA 模式來建構模組化、可重複使用的 UI 元件，例如按鈕、輸入框與對話框。

• 請注意，此技能嚴格針對 Tailwind CSS v4 環境進行優化；v3 使用者在實作前應參閱官方遷移指南。