Tailwind CSS 開發
文件
使用 search-docs 查閱詳細的 Tailwind CSS v4 模式與文件。
基本用法
- 使用 Tailwind CSS 類別來為 HTML 設定樣式。在引入新模式之前，請檢查並遵循專案中既有的 Tailwind 慣例。
- 主動提議將重複的模式提取成符合專案慣例的元件（例如 Blade、JSX、Vue）。
- 考慮類別的放置、順序、優先順序與預設值。移除冗餘類別，謹慎地將類別新增到父元素或子元素以減少重複，並將元素邏輯分組。
Tailwind CSS v4 特別事項
- 一律使用 Tailwind CSS v4，並避免使用已廢棄的實用功能。
- Tailwind v4 不支援
corePlugins。
CSS 優先配置
在 Tailwind v4 中，配置是 CSS 優先的，使用 @theme 指令 — 不再需要獨立的 tailwind.config.js 檔案：
@theme {
--color-brand: oklch(0.72 0.11 178);
}
匯入語法
在 Tailwind v4 中，使用一般的 CSS @import 陳述式匯入 Tailwind，取代 v3 使用的 @tailwind 指令：
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";
已取代的實用功能
Tailwind v4 移除了已廢棄的實用功能。請使用下方顯示的替代方案。對於透明度，請移除 *-opacity-* 類別，並將值以修飾詞的形式附加到現有顏色上：bg-blue-500 bg-opacity-50 改為 bg-blue-500/50，text-white text-opacity-75 改為 text-white/75。
| 已廢棄 | 替代方案 |
|---|---|
| bg-opacity-* | bg-{color}/* |
| text-opacity-* | text-{color}/* |
| border-opacity-* | border-{color}/* |
| divide-opacity-* | divide-{color}/* |
| ring-opacity-* | ring-{color}/* |
| placeholder-opacity-* | placeholder-{color}/* |
| flex-shrink-* | shrink-* |
| flex-grow-* | grow-* |
| overflow-ellipsis | text-ellipsis |
| decoration-slice | box-decoration-slice |
| decoration-clone | box-decoration-clone |
間距
使用 gap 工具類別而非 margin 來控制兄弟元素之間的間距：
<div class="flex gap-8">
<div>項目 1</div>
<div>項目 2</div>
</div>
深色模式
如果現有頁面和元件支援深色模式，新的頁面和元件也必須以相同方式支援，通常使用 dark: 變體：
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
內容會根據色彩配置自動調整
</div>
常見陷阱
- 使用已廢棄的 v3 實用功能（bg-opacity-、flex-shrink- 等）
- 使用
@tailwind指令而非@import "tailwindcss" - 嘗試使用
tailwind.config.js而非 CSS@theme指令 - 使用 margins 而非 gap 工具類別來控制兄弟元素間的間距
- 當專案使用深色模式時，忘記新增深色模式變體