tailwindcss

TailwindCSS v4 技能是專為現代網頁開發設計的工具組，專注於 CSS-first 配置範式。它使開發人員能夠管理設計系統、樣式架構和組件級響應式設計，而無需依賴傳統的基於 JavaScript 的配置文件。此技能專為需要精確控制設計標記、自定義工具生成以及容器查詢和 CSS 變量等現代原生 CSS 功能的前端工程師和 UI 設計師而設計。通過將配置轉移到標準 CSS 指令，該技能促進了與 Vite 等框架的無縫集成，並確保了與 Safari 16.4+、Chrome 111+ 和 Firefox 128+ 等現代瀏覽器標準的兼容性。

• 全面支持 @theme 指令，將顏色、排版、間距和動畫等設計標記定義並擴展為 CSS 自定義屬性。

• 使用 @source 指令進行智能內容檢測，允許對 HTML、JS 和框架特定文件的掃描模式進行精確控制。

• 高級自定義功能，包括用於基於狀態樣式的 @custom-variant 和用於創建項目特定快捷工具的 @utility。

• 使用 @plugin 指令的插件集成功能，通過排版和表單等官方 Tailwind 包擴展功能。

• 使用 @theme inline 的高效主題策略，將現有的系統 CSS 變量映射到 Tailwind 工具，促進深色/淺色模式轉換。

• 推薦用於從 Tailwind v3 遷移到 v4 的項目，特別是那些希望消除與 tailwind.config.js 相關的構建時間複雜性的項目。

• 使用 @theme 塊來集中管理全局設計系統（如調色板和斷點），以保持大型應用程序的一致性。

• 應用 @utility 模式以減少重複任務的 CSS 樣板代碼，例如 Flexbox 居中或複雜的滾動條自定義。

• 輸入時，提供使用 Tailwind 導入的乾淨 CSS 文件；輸出時，獲得為性能優化的生成工具類。

• 請注意，此技能強制執行現代 CSS 實踐，並不依賴 Sass 或 Less 等傳統預處理器，因為 Tailwind 本身即可處理預處理引擎。