介紹
Tailwind CSS v4.0 標誌著從基於 JavaScript 的配置到 CSS 優先架構 的範式轉移。 tailwind.config.js 檔案消失了；設計標記現在使用 @theme 直接在 CSS 中定義。此版本還整合了 Lightning CSS 以實現極快的構建，採用了 CSS 嵌套和 @layer 等現代 CSS 功能，並提供了完全重寫的引擎。本文詳細介紹了 v3 的主要變更並提供了實用的遷移指南。
使用 @theme 進行 CSS 優先配置
在 v3 中，自訂設計令牌需要 JavaScript：
// tailwind.config.js (v3)
module.exports = {
theme: {
extend: {
colors: { brand: '#0f172a' },
fontFamily: { display: ['Inter', 'sans-serif'] },
},
},
};
在 v4 中，相同的配置完全位於主 CSS 檔案中：
@import "tailwindcss";
@theme {
--color-brand: #0f172a;
--font-family-display: 'Inter', sans-serif;
}
@theme 指令會自動產生對應的實用程式類別（bg-brand、font-display）。令牌不需要 JavaScript 建置步驟。
基於 @import 的設定和 Lightning CSS
Tailwind v4 以單一 CSS 層導入：
@import "tailwindcss";
@import "./custom-components.css" layer(components);
該框架使用 Lightning CSS 作為其底層 CSS 解析器和壓縮器，取代了 PostCSS + Autoprefixer 鏈。在大型專案中，與 v3 相比，建造速度快 3-10 倍。
若要啟用 Lightning CSS 功能，例如本機嵌套和攤商前綴：
@import "tailwindcss" source(none);
@import "./src/input.css" source("src");
現代重置和 @layer 支持
Tailwind v4 使用基於 box-sizing: border-box 全域、所有元素上 margin: 0 的 現代 CSS 重設，並改進了表單元素預設值。它還尊重 @layer 級聯層，讓您可以將 Tailwind 實用程式與您自己的分層樣式交錯：
@layer base, components, utilities;
@import "tailwindcss" layer(base);
@import "./my-components.css" layer(components);
主要實用程式變更
幾個實用程式類別出現了突破性的改進：
| v3 類別 | v4 等效 | 筆記 |
|---|---|---|
| 佔位符_0 | 佔位符_1 | 為保持一致性而重新命名 |
| 佔位符_0 | 佔位符_1 | 現在使用 overflow: clip |
ring 變體 | 佔位符_1 | 預設戒指顏色已更改 |
| 佔位符_0 | 佔位符_1 | 過濾器現在按實用程式選擇加入 |
@variant 指令允許自訂狀態變體：
@variant supports-hover {
@media (hover: hover) { @content; }
}
v3 的遷移指南
- 刪除
tailwind.config.js和postcss.config.js。 - 安裝 v4 軟體包：
npm install tailwindcss@next。 - 替換您的主 CSS 入口點以使用
@import "tailwindcss"。 - 將主題值移到
@theme區塊中。 - **盡可能將
@apply替換為常規 CSS 或@layer（v4 仍然支援@apply但建議在複雜情況下使用純 CSS）。 - 更新更改了實用程式名稱（
shadow-sm→shadow-xs）。 - 使用
npx tailwindcss --input src/input.css --output dist/output.css進行測試。
結論
Tailwind CSS v4.0 消除了配置的 JavaScript 建構依賴性，採用本機 CSS 功能，並透過 Lightning CSS 提供顯著更快的開發人員體驗。 CSS 優先的 @theme 系統使設計令牌更加透明且可移植。從 v3 遷移的團隊應該規劃配置檢修，但會受益於降低的建置複雜性和改進的運行時效能。