Tailwind CSS v4.0 帶來了大量新特性，旨在提升開發(fā)效率，優(yōu)化性能，并為開發(fā)者提供更多的創(chuàng)意空間。此次發(fā)布不僅提升了性能，還引入了更強(qiáng)大的實(shí)用工具、改進(jìn)的配置選項(xiàng)和增強(qiáng)的設(shè)計(jì)工具。借助這些更新，使用 Tailwind 構(gòu)建現(xiàn)代化、可擴(kuò)展的 Web 應(yīng)用變得更加輕松。

主要亮點(diǎn)

性能提升

Tailwind CSS v4.0 最大的亮點(diǎn)之一是性能顯著提升。經(jīng)過全面優(yōu)化，框架的構(gòu)建速度大幅加快。具體來說，以下是性能的提升情況：

• 完整構(gòu)建：從 378 毫秒降至 100 毫秒，速度提升了 3.78 倍
• 增量構(gòu)建（新增 CSS）：從 44 毫秒降至 5 毫秒，提升了 8.8 倍
• 增量構(gòu)建（無新增 CSS）：從 35 毫秒降至 192 微秒，提升了 182 倍

這些改進(jìn)使得在處理大型項(xiàng)目時(shí)，開發(fā)工作流程更加流暢和高效。

CSS 優(yōu)先配置

v4.0 引入了 CSS 優(yōu)先的配置方式，允許開發(fā)者直接在 CSS 文件中配置設(shè)計(jì)令牌、斷點(diǎn)等，而無需在 tailwind.config.js 文件中進(jìn)行設(shè)置。這簡(jiǎn)化了配置流程，使得開發(fā)過程更加直觀。

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
}

此外，Tailwind 現(xiàn)在支持原生 CSS 層疊（cascade layers），這使得開發(fā)者能更好地控制樣式的加載順序，避免較高層的樣式無意中覆蓋較低層的樣式，從而使 CSS 輸出更加可預(yù)測(cè)且有序。

設(shè)計(jì)令牌與動(dòng)態(tài)間距

v4.0 引入了設(shè)計(jì)令牌作為 CSS 變量，增強(qiáng)了運(yùn)行時(shí)的靈活性。顏色、字體、斷點(diǎn)等現(xiàn)在可以作為 CSS 變量定義，并在整個(gè)項(xiàng)目中動(dòng)態(tài)引用。

:root {
  --font-display: "Satoshi", "sans-serif";
  --color-avocado-100: oklch(0.99 0 0);
}

通過使用設(shè)計(jì)令牌，開發(fā)者可以輕松地在全站范圍內(nèi)進(jìn)行統(tǒng)一管理，并確保樣式的一致性。

原生 CSS 層疊

Tailwind v4.0 增強(qiáng)了對(duì) CSS 層疊的支持，允許開發(fā)者對(duì)樣式的層次順序進(jìn)行更精細(xì)的控制，確保上層的樣式不會(huì)無意中覆蓋下層的樣式。這一特性進(jìn)一步提升了 CSS 輸出的組織性和可維護(hù)性。

@layer theme {
  :root {
    --font-sans: ui-sans-serif, system-ui, sans-serif;
  }
}

@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
  }
}

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
}

自動(dòng)源文件檢測(cè)

v4.0 自動(dòng)檢測(cè) HTML 和 JavaScript 等文件，省去了手動(dòng)配置內(nèi)容源的麻煩。如果某些文件未被自動(dòng)檢測(cè)到，開發(fā)者可以通過 @source 指令手動(dòng)添加。

內(nèi)置導(dǎo)入與 CSS 轉(zhuǎn)譯

不再需要第三方插件（如 postcss-import），Tailwind 現(xiàn)在原生支持導(dǎo)入額外的 CSS 文件，顯著提升了構(gòu)建速度并簡(jiǎn)化了配置流程。此外，內(nèi)置的 Lightning CSS 進(jìn)行 CSS 轉(zhuǎn)譯，自動(dòng)處理供應(yīng)商前綴、壓縮和現(xiàn)代 CSS 特性的轉(zhuǎn)譯，免去了使用 autoprefixer 和 postcss-preset-env 的需求。

簡(jiǎn)化主題配置

v4.0 簡(jiǎn)化了主題配置，去除了需要手動(dòng)設(shè)置的某些實(shí)用工具（如 grid-cols-12 或 opacity-70）。這些工具現(xiàn)在開箱即用，開發(fā)者可以將精力集中在核心設(shè)計(jì)令牌（如字體、顏色和斷點(diǎn)）上。

<div class="grid grid-cols-73">
  <div>1</div>
  <!-- ... -->
  <div>73</div>
</div>

簡(jiǎn)化的變量顏色

Tailwind v4.0 提供了 color-mix() 函數(shù)，自動(dòng)處理透明度修飾符，簡(jiǎn)化了復(fù)雜的顏色操作，減少了需要使用變通方法的情況。

@theme {
  --color-primary: var(--color-blue-500);
  --color-error: var(--color-red-500);
}

新的高級(jí)實(shí)用工具和配置更新

v4.0 引入了新的漸變工具，簡(jiǎn)化了漸變的創(chuàng)建過程，包括：

• 線性漸變（bg-linear-45）
• 徑向漸變（bg-radial-[at_25%_25%]）
• 圓錐漸變（bg-conic-[in_hsl_longer_hue]）

同時(shí)，Tailwind 還支持 3D 變換，如 rotate-x-*、rotate-y-* 和 scale-z-*，讓開發(fā)者可以創(chuàng)建更加復(fù)雜的 3D 效果。此外，Z 軸的變換（如 scale-z-50、translate-z-0）也為開發(fā)更具沉浸感的動(dòng)態(tài)布局提供了便利。

擴(kuò)展的變體和選擇器

v4.0 帶來了更多動(dòng)態(tài)樣式的變體，例如：

• @starting-style：當(dāng)元素首次出現(xiàn)時(shí)觸發(fā)動(dòng)畫。
• **not-**：在條件為假時(shí)應(yīng)用樣式。
• **in-***：根據(jù)元素狀態(tài)（無須父元素）應(yīng)用樣式。

改進(jìn)的顏色與排版控制

v4.0 對(duì)漸變的處理進(jìn)行了大幅優(yōu)化，允許開發(fā)者更好地控制顏色、角度和插值方式。具體變體包括：

• bg-linear-45：應(yīng)用 45 度角的線性漸變，創(chuàng)建顏色之間的對(duì)角過渡。
• bg-linear-to-r/srgb：使用 sRGB 插值方式，使?jié)u變過渡更加平滑。
• bg-linear-to-r/oklch：使用 OKLCH 插值，提供更生動(dòng)的漸變效果。
• **bg-conic-[in_hsl_longer_hue]**：應(yīng)用更寬色域的圓錐漸變，產(chǎn)生更復(fù)雜的漸變效果。

3D 變換和視角控制

v4.0 引入了用于控制 3D 變換和視角的新工具，使得開發(fā)者可以創(chuàng)建更具沉浸感的視覺效果。比如：

• perspective-normal：設(shè)置 500px 的默認(rèn)視角深度，創(chuàng)建自然的 3D 效果。
• perspective-distant：將視角深度調(diào)整為 1200px，產(chǎn)生更為微妙的 3D 效果。
• backface-visible 和 backface-hidden：分別控制元素在旋轉(zhuǎn)時(shí)的背面可見性。

UI 和表單元素增強(qiáng)

v4.0 提供了一些新的實(shí)用工具，用于簡(jiǎn)化表單控件的處理，尤其是在處理不同輸入類型或用戶偏好時(shí)：

• field-sizing-content：根據(jù)內(nèi)容調(diào)整文本區(qū)域的大小，隨著用戶輸入自動(dòng)調(diào)整。
• field-sizing-fixed：設(shè)置文本區(qū)域的固定大小，防止其因內(nèi)容變化而自動(dòng)調(diào)整。
• scheme-light 和 scheme-dark：分別為亮色和暗色主題的表單控件提供樣式支持。

字體拉伸工具

v4.0 添加了新的字體拉伸工具，使開發(fā)者可以更精細(xì)地控制可變字體的寬度：

• font-stretch-normal：設(shè)置字體寬度為默認(rèn)值。
• font-stretch-expanded：擴(kuò)展字體寬度，產(chǎn)生更拉伸的效果。
• **font-stretch-150%**：將字體寬度設(shè)置為正常寬度的 150%，使其更具視覺沖擊力。

可組合的新變體

Tailwind v4.0 引入了可組合的變體，例如 group-*、peer-* 和 not-*，它們?cè)试S根據(jù)父元素或兄弟元素的狀態(tài)應(yīng)用樣式。例如，group-has-[&[data-potato]]:opacity-100 會(huì)在父元素中存在 data-potato 屬性時(shí)應(yīng)用樣式。

Tailwind 配置改進(jìn)

v4.0 進(jìn)一步增強(qiáng)了配置的靈活性，開發(fā)者可以：

• 在 @theme 指令內(nèi)定義自定義動(dòng)畫和關(guān)鍵幀。
• 更輕松地覆蓋默認(rèn)主題設(shè)置。
• 直接在配置文件中控制斷點(diǎn)。

版本 4.0 的重大變更

移除已廢棄的工具類

v4.0 移除了過時(shí)的 bg-opacity-* 和 text-opacity-* 類，取而代之的是新的透明度修飾符，如 bg-black/50，使得透明度的管理更加直觀。

更新陰影和模糊的縮放

為了與其他陰影工具保持一致，shadow 工具類已經(jīng)改名為 shadow-sm。此外，新增了中等和大號(hào)陰影（shadow-md 和 shadow-lg）來保持統(tǒng)一的語(yǔ)義。

更新邊框顏色和圓環(huán)寬度

Tailwind v4.0 更新了邊框顏色的默認(rèn)值，現(xiàn)為 currentColor，意味著邊框顏色會(huì)繼承自文本顏色。同時(shí)，默認(rèn)的圓環(huán)寬度也調(diào)整為 3px（ring-3），統(tǒng)一了圓環(huán)的大小。

總結(jié)

Tailwind CSS v4.0 帶來了眾多令人興奮的功能，使開發(fā)者可以更加高效地構(gòu)建高性能、視覺震撼的網(wǎng)頁(yè)。無論是通過優(yōu)化后的構(gòu)建引擎，簡(jiǎn)化的配置選項(xiàng)，增強(qiáng)的漸變工具，還是更強(qiáng)大的 3D 變換能力，這一版本都讓 Tailwind 更加完善。借助這些新工具和功能，無論是小型項(xiàng)目還是大型應(yīng)用，開發(fā)者都可以更加迅速和高效地創(chuàng)建響應(yīng)式、動(dòng)態(tài)的設(shè)計(jì)。