Tailwind CSS 模式 (v4 - 2025)
以 CSS 原生組態為核心的現代工具優先 CSS。
1. Tailwind v4 架構
與 v3 的差異
| v3 (舊版) | v4 (現行版本) |
|---|
tailwind.config.js | 基於 CSS 的 @theme 指令 |
| PostCSS 外掛 | Oxide 引擎 (速度快 10 倍) |
| JIT 模式 | 原生、永遠開啟 |
| 外掛系統 | CSS 原生功能 |
@apply 指令 | 仍可使用，但不建議 |
v4 核心概念
| 概念 | 說明 |
|---|
| CSS 優先 | 在 CSS 中進行組態，而非 JavaScript |
| Oxide 引擎 | 基於 Rust 的編譯器，速度更快 |
| 原生巢狀 | CSS 巢狀語法，無需 PostCSS |
| CSS 變數 | 所有 Token 均以 --* 變數形式公開 |
2. 基於 CSS 的組態
主題定義
@theme {
/* 色彩 - 使用語意化名稱 */
--color-primary: oklch(0.7 0.15 250);
--color-surface: oklch(0.98 0 0);
--color-surface-dark: oklch(0.15 0 0);
/* 間距比例 */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
/* 字型 */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
何時擴充 vs 覆寫
| 動作 | 使用時機 |
|---|
| 擴充 | 在預設值之外新增新值 |
| 覆寫 | 完全取代預設比例 |
| 語意 Token | 專案專屬命名 (primary, surface) |
3. 容器查詢 (v4 原生)
斷點 vs 容器
| 類型 | 回應對象 |
|---|
斷點 (md:) | 視窗寬度 |
容器 (@container) | 父元素寬度 |
容器查詢用法
| 模式 | 類別 |
|---|
| 定義容器 | 在父元素上使用 @container |
| 容器斷點 | 在子元素上使用 @sm:、@md:、@lg: |
| 具名容器 | @container/card 以提高明確性 |
使用時機
| 情境 | 使用方式 |
|---|
| 頁面層級佈局 | 視窗斷點 |
| 元件層級響應式 | 容器查詢 |
| 可重複使用元件 | 容器查詢 (與上下文無關) |
4. 響應式設計
斷點系統
| 前綴 | 最小寬度 | 目標裝置 |
|---|
| (無) | 0px | 行動裝置優先基礎 |
sm: | 640px | 大手機 / 小平板 |
md: | 768px | 平板 |
lg: | 1024px | 筆電 |
xl: | 1280px | 桌上型電腦 |
2xl: | 1536px | 大型桌上型電腦 |
行動裝置優先原則
- 先撰寫行動裝置樣式 (不加前綴)
- 使用前綴為較大螢幕加入覆寫樣式
- 範例：
w-full md:w-1/2 lg:w-1/3
5. 暗色模式
組態策略
| 方法 | 行為 | 使用時機 |
|---|
class | 透過 .dark 類別切換 | 手動主題切換器 |
media | 跟隨系統偏好 | 無使用者控制 |
selector | 自訂選擇器 (v4) | 複雜主題設定 |
暗色模式模式
| 元素 | 亮色 | 暗色 |
|---|
| 背景 | bg-white | dark:bg-zinc-900 |
| 文字 | text-zinc-900 | dark:text-zinc-100 |
| 邊框 | border-zinc-200 | dark:border-zinc-700 |
6. 現代佈局模式
Flexbox 模式
| 模式 | 類別 |
|---|
| 居中 (雙軸) | flex items-center justify-center |
| 垂直堆疊 | flex flex-col gap-4 |
| 水平排列 | flex gap-4 |
| 兩端對齊 | flex justify-between items-center |
| 換行網格 | flex flex-wrap gap-4 |
Grid 模式
| 模式 | 類別 |
|---|
| 自動適應響應式 | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| 不對稱 (Bento) | grid grid-cols-3 grid-rows-2 搭配跨欄/跨列 |
| 側邊欄佈局 | grid grid-cols-[auto_1fr] |
注意： 建議優先使用不對稱 / Bento 佈局，而非對稱的三欄網格。
7. 現代色彩系統
OKLCH vs RGB / HSL
| 格式 | 優點 |
|---|
| OKLCH | 知覺均勻，更適合設計 |
| HSL | 色相/飽和度直觀 |
| RGB | 舊版相容性 |
色彩 Token 架構
| 層級 | 範例 | 目的 |
|---|
| 原始 | --blue-500 | 原始色彩數值 |
| 語意 | --color-primary | 基於用途的命名 |
| 元件 | --button-bg | 元件專屬 |
8. 字型系統
字型堆疊模式
| 類型 | 建議 |
|---|
| Sans | 'Inter', 'SF Pro', system-ui, sans-serif |
| Mono | 'JetBrains Mono', 'Fira Code', monospace |
| Display | 'Outfit', 'Poppins', sans-serif |
字級比例
| 類別 | 大小 | 用途 |
|---|
text-xs | 0.75rem | 標籤、說明文字 |
text-sm | 0.875rem | 次要文字 |
text-base | 1rem | 內文 |
text-lg | 1.125rem | 引導文字 |
text-xl+ | 1.25rem+ | 標題 |
9. 動畫與轉場
內建動畫
| 類別 | 效果 |
|---|
animate-spin | 持續旋轉 |
animate-ping | 注意力脈衝 |
animate-pulse | 微妙的透明度脈衝 |
animate-bounce | 彈跳效果 |
轉場模式
| 模式 | 類別 |
|---|
| 所有屬性 | transition-all duration-200 |
| 特定屬性 | transition-colors duration-150 |
| 加上緩動 | ease-out 或 ease-in-out |
| 懸停效果 | hover:scale-105 transition-transform |
10. 元件提取
提取時機
| 訊號 | 動作 |
|---|
| 相同類別組合出現 3 次以上 | 提取為元件 |
| 複雜的狀態變體 | 提取為元件 |
| 設計系統元素 | 提取並撰寫文件 |
提取方法
| 方法 | 使用時機 |
|---|
| React / Vue 元件 | 動態、需要 JavaScript |
| CSS 中的 @apply | 靜態、不需要 JavaScript |
| 設計 Token | 可重複使用的數值 |
11. 反模式
| 不要這樣做 | 應該這樣做 |
|---|
| 到處使用任意數值 | 採用設計系統比例 |
!important | 正確解決明確性問題 |
內聯 style= | 使用工具類別 |
| 重複長串類別列表 | 提取為元件 |
| 混合 v3 組態與 v4 | 完全遷移至 CSS 優先 |
大量使用 @apply | 優先使用元件 |
12. 效能原則
| 原則 | 實作方式 |
|---|
| 清除未使用樣式 | v4 自動執行 |
| 避免動態化 | 不使用模板字串類別 |
| 使用 Oxide | v4 預設，速度快 10 倍 |
| 快取建置 | CI/CD 快取 |
記住： Tailwind v4 是 CSS 優先。擁抱 CSS 變數、容器查詢與原生功能。組態檔現在是選用項目。