tailwind-config

此技能可精確控制專案的樣式層，專為 Tailwind CSS v4 及整合 HeroUI 的設計系統量身打造。它適用於維護跨 Web 應用程式之設計標記（Design Tokens）、間距比例與配色方案的前端開發人員與工程師。透過直接與全域 CSS 變數及 tailwind.config 檔案互動，確保應用程式的視覺語言具備可擴充性、易於維護，並與核心專案需求嚴格對齊。

• 更新主題設定，包括調色盤、字體比例與動畫關鍵影格，使 UI 與不斷演進的設計規範保持同步。

• 管理映射至 CSS 變數的語意化設計標記，以支援動態深色模式及一致的淺色模式視覺效果。

• 定義並擴充自訂工具類別，以滿足特殊的 UI 需求，例如特殊的文字折行或捲軸處理。

• 設定 Tailwind 外掛程式（如 @tailwindcss/typography 與 @tailwindcss/forms），以維持穩健的樣式基礎。

• 強制執行嚴格的樣式慣例，例如針對固定尺寸元素使用 size-* 工具類別，而非標準的 width 與 height 組合。

• 與網頁應用程式的 globals.css 檔案整合，以集中管理 CSS 自訂屬性與主題專屬的變體覆蓋。

• 當您需要增加新品牌色彩、調整間距系統或在 Next.js App Router 環境中設定自訂主題時，請使用此技能。

• 新增目錄結構時，請務必檢查配置中的 content 路徑一致性，以確保樣式清理機制運作正常。

• 驗證深色模式功能時，請確保 :root 與 .dark 選擇器皆已正確定義 CSS 自訂變數。

• 利用內建的 CLI 除錯指令（如 npx tailwindcss config）在開發過程中驗證已解析的設定。

• 優先採用專案 codebase 中已建立的「行動優先」（mobile-first）響應式設計模式。

• 確保所有樣式定義均支援專案對於高效率快取與高效能前端交付的需求。