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

主要亮點

性能提升

Tailwind CSS v4.0 最大的亮點之一是性能顯著提升。經(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 倍

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

CSS 優(yōu)先配置

v4.0 引入了 CSS 優(yōu)先的配置方式，允許開發(fā)者直接在 CSS 文件中配置設(shè)計令牌、斷點等，而無需在 tailwind.config.js 文件中進行設(shè)置。這簡化了配置流程，使得開發(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 輸出更加可預測且有序。

設(shè)計令牌與動態(tài)間距

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

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

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

原生 CSS 層疊

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

@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;
  }
}

自動源文件檢測

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

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

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

簡化主題配置

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

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

簡化的變量顏色

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

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

新的高級實用工具和配置更新

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

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

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

擴展的變體和選擇器

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

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

改進的顏色與排版控制

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

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

3D 變換和視角控制

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

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

UI 和表單元素增強

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

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

字體拉伸工具

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

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

可組合的新變體

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

Tailwind 配置改進

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

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

版本 4.0 的重大變更

移除已廢棄的工具類

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

更新陰影和模糊的縮放

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

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

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

總結(jié)

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