SKILL.md
唯讀
名稱
tailwindcss
描述
Tailwind CSS 工具優先 CSS 框架。適用於使用工具類別樣式化網頁應用程式、建立響應式設計，或透過主題變數自訂設計系統。
Tailwind CSS
此技能基於 Tailwind CSS v4.1.18，產生於 2026-01-28。
Tailwind CSS 是一個工具優先的 CSS 框架，用於快速建立自訂使用者介面。與其撰寫自訂 CSS，你可以在標記中直接使用工具類別來組合設計。Tailwind v4 引入了 CSS 優先的配置方式，搭配主題變數，讓自訂設計系統更加容易。
核心參考
| 主題 | 說明 | 參考 |
|---|---|---|
| 安裝 | Vite、PostCSS、CLI 與 CDN 設定 | core-installation |
| 工具類別 | 了解 Tailwind 的工具優先方法與樣式化元素 | core-utility-classes |
| 主題變數 | 設計代碼、自訂主題與主題變數命名空間 | core-theme |
| 響應式設計 | 行動優先斷點、響應式變體與容器查詢 | core-responsive |
| 變體 | 使用狀態、偽類別與媒體查詢變體條件式套用工具 | core-variants |
| Preflight | Tailwind 的基礎樣式以及如何擴充或停用它們 | core-preflight |
版面
Display & Flexbox & Grid
| 主題 | 說明 | 參考 |
|---|---|---|
| Display | flex、grid、block、inline、hidden、sr-only、flow-root、contents | layout-display |
| Flexbox | flex-direction、justify、items、gap、grow、shrink、wrap、order | layout-flexbox |
| Grid | grid-cols、grid-rows、gap、place-items、col-span、row-span、subgrid | layout-grid |
| 長寬比 | 控制元素長寬比以適應響應式媒體 | layout-aspect-ratio |
| 多欄 | 雜誌風格或 Masonry 版面的多欄佈局 | layout-columns |
定位
| 主題 | 說明 | 參考 |
|---|---|---|
| Position | 使用 static、relative、absolute、fixed 與 sticky 控制元素定位 | layout-position |
| Inset | 使用 top、right、bottom、left 與 inset 工具控制定位元素的放置 | layout-inset |
尺寸
| 主題 | 說明 | 參考 |
|---|---|---|
| 寬度 | 使用間距比例、分數、容器尺寸與視埠單位設定元素寬度 | layout-width |
| 高度 | 使用間距比例、分數、視埠單位與內容基礎尺寸設定元素高度 | layout-height |
| 最小與最大尺寸 | min-width、max-width、min-height、max-height 限制 | layout-min-max-sizing |
間距
| 主題 | 說明 | 參考 |
|---|---|---|
| 外邊距 | 使用間距比例、負值、邏輯屬性與空間工具控制元素外邊距 | layout-margin |
| 內邊距 | 使用間距比例、邏輯屬性與方向工具控制元素內邊距 | layout-padding |
溢出
| 主題 | 說明 | 參考 |
|---|---|---|
| Overflow | 控制元素如何處理超出容器的內容 | layout-overflow |
圖片與取代元素
| 主題 | 說明 | 參考 |
|---|---|---|
| Object Fit & Position | 控制圖片與影片的縮放與定位方式 | layout-object-fit-position |
表格
| 主題 | 說明 | 參考 |
|---|---|---|
| 表格佈局 | border-collapse、table-auto、table-fixed | layout-tables |
變形
| 主題 | 說明 | 參考 |
|---|---|---|
| 變形基礎 | 啟用變形、硬體加速與自訂變形值的基礎變形工具 | transform-base |
| 平移 | 使用間距比例、百分比與自訂值在 x、y、z 軸上平移元素 | transform-translate |
| 旋轉 | 使用角度值與自訂旋轉在 2D 與 3D 空間中旋轉元素 | transform-rotate |
| 縮放 | 使用百分比值均勻或沿特定軸縮放元素 | transform-scale |
| 傾斜 | 使用角度值在 x 與 y 軸上傾斜元素 | transform-skew |
排版
| 主題 | 說明 | 參考 |
|---|---|---|
| 字型與文字 | 字型大小、粗細、顏色、行高、字距、裝飾、截斷 | typography-font-text |
| 文字對齊 | 使用 left、center、right、justify 與邏輯屬性控制文字對齊 | typography-text-align |
| 列表樣式 | 項目符號與標記的 list-style-type、list-style-position | typography-list-style |
視覺
| 主題 | 說明 | 參考 |
|---|---|---|
| 背景 | 背景顏色、漸層、圖片、尺寸、位置 | visual-background |
| 邊框 | 邊框寬度、顏色、圓角、分隔線、環 | visual-border |
| 效果 | 陰影、不透明度、混合模式、背景模糊、濾鏡 | visual-effects |
| SVG | SVG 與圖示樣式的 fill、stroke、stroke-width | visual-svg |
效果與互動
| 主題 | 說明 | 參考 |
|---|---|---|
| 轉場與動畫 | CSS 轉場、動畫關鍵影格、減少動畫 | effects-transition-animation |
| 可見性與互動 | 可見性、游標、pointer-events、user-select、z-index | effects-visibility-interactivity |
| 表單控制 | accent-color、appearance、caret-color、resize | effects-form-controls |
| 滾動吸附 | 輪播的 scroll-snap-type、scroll-snap-align | effects-scroll-snap |
功能
深色模式
| 主題 | 說明 | 參考 |
|---|---|---|
| 深色模式 | 使用 dark 變體與自訂策略實作深色模式 | features-dark-mode |
遷移
| 主題 | 說明 | 參考 |
|---|---|---|
| 升級指南 | 從 v3 遷移到 v4、重大變更、重新命名對應 | features-upgrade |
自訂
| 主題 | 說明 | 參考 |
|---|---|---|
| 自訂樣式 | 新增自訂樣式、工具、變體，以及使用任意值 | features-custom-styles |
| 函式與指令 | Tailwind 的 CSS 指令與函式，用於處理設計系統 | features-functions-directives |
| 內容偵測 | Tailwind 如何偵測類別以及如何自訂內容掃描 | features-content-detection |
最佳實務
| 主題 | 說明 | 參考 |
|---|---|---|
| 工具模式 | 管理重複、衝突、important 修飾符、何時使用元件 | best-practices-utility-patterns |
關鍵建議
- 直接在標記中使用工具類別 - 透過組合工具來設計
- 使用主題變數自訂 - 使用
@theme指令定義設計代碼 - 行動優先響應式設計 - 行動裝置使用無前綴工具，斷點使用前綴工具
- 使用完整的類別名稱 - 切勿使用字串插值動態建構類別
- 善用變體 - 堆疊變體以實現複雜的條件式樣式
- 偏好 CSS 優先配置 - 使用
@theme、@utility與@custom-variant而非 JavaScript 配置
