Tailwind CSS v4.0 開源進度

去年夏天在 Tailwind Connect 上，我分享了 Oxide 的預覽 — 這是一個我們一直在開發的 Tailwind CSS 新高效能引擎，旨在簡化開發人員體驗，並利用近年來 Web 平台的發展。

這個新引擎原本計劃以 v3.x 版本發布，但即使我們致力於向後兼容性，它也明顯感覺像是一個框架的新世代，因此值得稱為 v4.0。

現在還處於早期階段，我們還有許多工作要做，但今天我們開源了我們的進度並標記了第一個公開的v4.0.0-alpha，以便您可以開始試用它，並幫助我們在今年晚些時候發布穩定版本。

我會盡量簡短，將一些興奮感留到穩定版本發布時，但如果您喜歡嘗試非常早期和實驗性的東西，這裡應該有足夠的資訊讓您開始。

為速度而打造的新引擎

新引擎是從頭開始重寫的，使用了我們現在對框架的所有了解，以更好地建模問題空間，使用更少的程式碼使事情變得更快。

• 速度提升高達 10 倍 — 我們可以在 105 毫秒內完成 Tailwind CSS 網站的完整構建，而不是 960 毫秒，或者在 55 毫秒內完成我們的 Catalyst UI 工具包，而不是 341 毫秒。
• 更小的佔用空間 — 新引擎的安裝大小減少了 35% 以上，即使包含我們發布的較重的原生套件，例如我們在 Rust 和 Lightning CSS 中重寫的部分。
• 在重要的地方使用 Rust — 我們已將框架中一些最昂貴且可並行的部分遷移到 Rust，同時將框架的核心保留在 TypeScript 中以實現可擴展性。
• 一個相依性 — 新引擎唯一相依的是 Lightning CSS。
• 自訂解析器 — 我們編寫了自己的 CSS 解析器，並設計了針對我們需求的自訂資料結構，使我們的解析速度比 PostCSS 快 2 倍以上。

統一工具鏈

Tailwind CSS v4 不再只是一個外掛程式 — 它是一個用於處理 CSS 的一體化工具。我們已將 Lightning CSS 直接整合到框架中，因此您無需配置任何有關 CSS 管道的內容。

• 內建 @import 處理 — 無需設定和配置像 postcss-import 這樣的工具。
• 內建廠商前綴 — 您不再需要將 autoprefixer 新增到您的專案中。
• 內建巢狀支援 — 無需外掛程式即可展平巢狀 CSS，它開箱即用。
• 語法轉換 — 現代 CSS 功能（如 oklch() 顏色和媒體查詢範圍）會轉換為具有更好瀏覽器支援的語法。

我們仍然在發布 PostCSS 外掛程式，但我們也在探索第一方捆綁程式外掛程式，並且我們在此第一個 alpha 版本中發布了一個官方的 Vite 外掛程式，您今天可以試用。

為現代 Web 設計

我們正在展望 Tailwind CSS v4 的未來，並嘗試構建一個在未來幾年內都會感覺最先進的框架。

• 原生級聯層 — 我們現在正在使用真正的 @layer 規則，這解決了我們過去一直在努力解決的許多特殊性問題。
• 明確定義的自訂屬性 — 我們使用 @property 來定義具有正確類型和約束的內部自訂屬性，使其能夠執行諸如轉換背景漸層之類的操作。
• 將 color-mix 用於不透明度修飾符 — 在使用 CSS 變數進行顏色設定時，甚至調整 currentColor 的不透明度時，比以往更容易使用我們的不透明度修飾符語法。
• 核心中的容器查詢 — 我們已將容器查詢的支援直接新增到核心中，並新增了新的 @min-* 和 @max-* 變體來支援容器查詢範圍。

我們還在努力使用廣色域顏色刷新我們的調色板，並引入對其他現代 CSS 功能（如 @starting-style、錨點定位等）的支援。

可組合的變體

新的架構可以將作用於其他選取器的變體組合在一起，例如 group-*、peer-*、has-*，以及我們為 v4 引入的新 not-* 變體。

在較早的版本中，像 group-has-* 這樣的變體是在框架中明確定義的，但現在 group-* 可以與現有的 has-* 變體組合，而 has-* 變體又可以與其他變體（如 focus）組合。

<div class="group">  <div class="group-has-[&:focus]:opacity-100">  <div class="group-has-focus:opacity-100">      <!-- ... -->    </div>  </div></div>

這種可組合性沒有限制，如果由於某種可怕的原因您需要這樣做，您甚至可以編寫類似 group-not-has-peer-not-data-active:underline 的程式碼。

零配置內容偵測

您會注意到，至少在這些早期的 alpha 版本中，甚至無法配置您的 content 路徑。對於大多數專案，您將永遠不需要再這樣做了 — Tailwind 會直接為您找到您的範本檔案。

我們會根據您如何將 Tailwind 整合到您的專案中，使用以下兩種方式之一來完成此操作

• 使用 PostCSS 外掛程式或 CLI，Tailwind 將會爬取您的整個專案以尋找範本檔案，並使用我們內建的許多啟發式方法來保持快速，例如不爬取您的 .gitignore 檔案中的目錄，並忽略二進位檔案格式。

• 使用 Vite 外掛程式，我們依賴模組圖。這非常棒，因為我們確切知道您實際使用的是哪些檔案，因此它具有最大的效能，並且沒有誤報或漏報。我們希望未來能夠將這種方法擴展到 Vite 生態系統之外，使用其他捆綁程式外掛程式。

我們將來肯定會引入一種明確配置內容路徑的方法，但我們很好奇這種自動方法對大家的適用程度 — 它在我們自己的專案中運作得非常棒。

CSS 優先配置

Tailwind CSS v4.0 的一個主要目標是使框架感覺更像原生 CSS，而不是 JavaScript 程式庫。

安裝完成後，您可以使用常規 CSS @import 陳述式將其新增到您的專案中

@import "tailwindcss";

不再需要在 JavaScript 配置文件中設定所有自訂項目，你只需要使用 CSS 變數。

@import "tailwindcss";@theme {  --font-family-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --color-neon-pink: oklch(71.7% 0.25 360);  --color-neon-lime: oklch(91.5% 0.258 129);  --color-neon-cyan: oklch(91.3% 0.139 195.8);}

特殊的 @theme 指令會告訴 Tailwind 基於這些變數建立新的工具類別和變體，讓你可以像在標記中使用 3xl:text-neon-lime 這樣的類別。

<div class="max-w-lg 3xl:max-w-xl">  <h1 class="font-display text-4xl">    Data to <span class="text-neon-cyan">enrich</span> your online business  </h1></div>

新增 CSS 變數的行為類似於框架早期版本中的 extend，但你可以透過在定義所有自訂值之前，使用像 --color-*: initial 這樣的語法清除命名空間，來覆寫一整組變數。

@import "tailwindcss";@theme {  --color-*: initial;  --color-gray-50: #f8fafc;  --color-gray-100: #f1f5f9;  --color-gray-200: #e2e8f0;  /* ... */  --color-green-800: #3f6212;  --color-green-900: #365314;  --color-green-950: #1a2e05;}

我們仍在微調一些命名慣例，但你可以在 GitHub 上探索預設主題，了解有哪些可供自訂的選項。

如果你不想明確清除預設主題，而寧願從頭開始，你可以直接導入 "tailwindcss/preflight" 和 "tailwindcss/utilities" 來跳過導入預設主題。

@import "tailwindcss";@import "tailwindcss/preflight" layer(base);@import "tailwindcss/utilities" layer(utilities);@theme {  --color-*: initial;   --color-gray-50: #f8fafc;  --color-gray-100: #f1f5f9;  --color-gray-200: #e2e8f0;  /* ... */  --color-green-800: #3f6212;  --color-green-900: #365314;  --color-green-950: #1a2e05;}

我們也會將你所有的主題值作為原生 CSS 變數，在你的自訂 CSS 中提供。

:root {  --color-gray-50: #f8fafc;  --color-gray-100: #f1f5f9;  --color-gray-200: #e2e8f0;  /* ... */  --color-green-800: #3f6212;  --color-green-900: #365314;  --color-green-950: #1a2e05;}

這使得在任意值中引用你的任何主題值變得容易，而無需使用 theme() 函數。

<div class="p-[calc(var(--spacing-6)-1px)]">  <!-- ... --></div>

這也使得在使用像 Framer Motion 這樣的 UI 函式庫時可以使用你的主題值，而無需使用 resolveConfig() 函數。

import { motion } from "framer-motion";export const MyComponent = () => (  <motion.div initial={{ y: "var(--spacing-8)" }} animate={{ y: 0 }} exit={{ y: "var(--spacing-8)" }}>    {children}  </motion.div>);

有哪些變更

我們不會輕易做出重大變更，但在 v4 中，我們有一些不同的做法值得分享。

• 移除已棄用的工具類別 — 我們已移除很久以前停止記錄的工具類別，例如 text-opacity-*、flex-grow-* 和 decoration-slice，改用現代替代方案，例如 text-{color}/*、grow-* 和 box-decoration-slice。
• PostCSS 外掛程式和 CLI 是獨立的套件 — 主要的 tailwindcss 套件不再包含這些，因為不是每個人都需要它們，而是應該使用 @tailwindcss/postcss 和 @tailwindcss/cli 單獨安裝。
• 沒有預設邊框顏色 — border 工具類別過去預設為 gray-200，但現在像瀏覽器一樣預設為 currentColor。我們做出此變更，是為了避免當你使用 zinc 或 slate 或其他東西作為主要灰色時，意外將錯誤的灰色引入你的專案。
• 邊框預設為 1px — ring 工具類別過去預設為 3px 的藍色邊框，現在是使用 currentColor 的 1px 邊框。我們發現在專案中使用 ring-* 工具類別作為邊框的替代方案，並使用 outline-* 作為焦點邊框，因此我們認為在此處保持一致性是一個有幫助的變更。

還有一些其他非常低階的實作細節變更，可能會以某種方式在你的專案中浮現，但沒有像這些變更一樣是刻意的。如果你遇到任何令人驚訝的事情，請告訴我們。

v4.0 的路線圖

這個新引擎是從頭開始重寫的，到目前為止，我們一直完全專注於使用新配置方法重新構想開發人員體驗。

我們非常重視向後相容性，這也是我們在今年稍晚標記穩定 v4.0 版本之前，主要的工作重點。

• 支援 JavaScript 配置文件 — 重新引入與經典 tailwind.config.js 檔案的相容性，以方便遷移到 v4。
• 明確的內容路徑配置 — 當自動內容偵測對你的設定不夠好時，可以明確告訴 Tailwind 你的模板在哪裡。
• 支援其他深色模式 — 目前我們僅支援使用媒體查詢的深色模式，仍然需要重新實作選取器和變體策略。
• 外掛程式和自訂工具類別 — 我們尚不支援外掛程式，或編寫可自動與變體搭配使用的自訂工具類別。顯然，我們會在穩定版本發佈之前讓這項功能正常運作。
• 前綴支援 — 目前還沒有辦法為你的類別配置前綴，但我們肯定會將其恢復。
• 白名單和黑名單 — 無法強制 Tailwind 產生某些類別，或阻止它產生其他類別。
• 支援 important 配置 — 目前無法讓所有工具類別都產生 !important，但我們計劃實作它。
• 支援 theme() 函數 — 新專案不需要此函數，因為你現在可以使用 var()，但我們會為了向後相容性而實作它。
• 獨立 CLI — 我們尚未針對新引擎開發獨立的 CLI，但絕對會在 v4.0 版本發佈之前提供。

除此之外，我相信我們會發現很多需要修復的錯誤、一些令人興奮的新 CSS 功能可以偷偷加入，並完善一些需要在正式版本發佈之前進行更多潤飾的新 API。

我不想承諾具體的發佈時間表，但我個人很希望能在夏季假期開始前將 v4.0 標記為穩定版本。

試用 Alpha 版本

我們已經標記了幾個 Alpha 版本，你今天就可以在你的專案中開始使用它。

如果你正在使用 VS Code 的 Tailwind CSS IntelliSense 擴充功能，請確保從擴充功能頁面切換到預發佈版本，如果你正在使用我們的 Prettier 外掛程式，請確保安裝最新版本。

如果你發現問題，請在 GitHub 上告訴我們。我們真的希望這個東西在我們標記穩定版本之前是萬無一失的，報告你發現的任何問題都會對我們有很大的幫助。

使用 Vite

安裝 Tailwind CSS v4 Alpha 版本和我們新的 Vite 外掛程式

npm install tailwindcss@next @tailwindcss/vite@next

然後將我們的外掛程式新增至你的 vite.config.ts 檔案

import tailwindcss from "@tailwindcss/vite";import { defineConfig } from "vite";export default defineConfig({  plugins: [tailwindcss()],});

最後，在你的主要 CSS 檔案中導入 Tailwind

@import "tailwindcss";

使用 PostCSS

安裝 Tailwind CSS v4 Alpha 版本和獨立的 PostCSS 外掛程式套件

npm install tailwindcss@next @tailwindcss/postcss@next

然後將我們的外掛程式新增至你的 postcss.config.js 檔案

module.exports = {  plugins: {    "@tailwindcss/postcss": {},  },};

最後，在你的主要 CSS 檔案中導入 Tailwind

@import "tailwindcss";

使用 CLI

安裝 Tailwind CSS v4 Alpha 版本和獨立的 CLI 套件

npm install tailwindcss@next @tailwindcss/cli@next

接下來，在你的主要 CSS 檔案中導入 Tailwind

@import "tailwindcss";

最後，使用 CLI 工具編譯你的 CSS

npx @tailwindcss/cli@next -i app.css -o dist/app.css