Tailwind 4.0 將會更快更好。

嘗試當(dāng)前處于 Alpha 狀態(tài)的新功能

安裝 Tailwind 版本 4 的包：

$ npm install tailwindcss@next @tailwindcss/vite@next

Vite 配置:

import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

最后，在你的主 CSS 文件（app.css）中導(dǎo)入 Tailwind

@import "tailwindcss";

那么，現(xiàn)在讓我們關(guān)注一下 Tailwind 版本 4 中的新功能：

零配置內(nèi)容檢測

在以前的版本中，我們需要創(chuàng)建 tailwind.config.js 并在全局 CSS 文件中添加三個指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

現(xiàn)在，只需要一個指令，而且我們將使用帶有特殊指令 @theme 的 CSS 變量來代替配置文件，如下所示：

@import "tailwindcss";

@theme {
  --font-family-display: "Satoshi", "sans-serif";
  --breakpoint-4xl: 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 根據(jù)這些變量提供新的實(shí)用程序和變體，讓你可以在標(biāo)記中使用類似 4xl:text-neon-lime 的類：

<div class="max-w-lg 4xl: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 清除命名空間，然后定義所有自定義值：

main.css：

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

如果你不想明確清除默認(rèn)主題并且更愿意從頭開始，你可以直接導(dǎo)入 tailwindcss/preflight 和 tailwindcss/utilities 來跳過導(dǎo)入默認(rèn)主題：

main.css：

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

通過這種方式，你可以更靈活地定制 Tailwind 的主題和實(shí)用程序，使其更適應(yīng)你的項目需求。

組合變體

新的架構(gòu)使得可以組合作用于其他選擇器的變體，例如 group-*、peer-、has- 和新的 not-*。

在早期版本中，像 group-has-* 這樣的變體在框架中被顯式定義，但現(xiàn)在 group-* 可以與現(xiàn)有的 has-* 變體組合，并且可以與其他變體（如 focus）組合：

index.html：

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

通過這種方式，你可以創(chuàng)建更靈活、更強(qiáng)大的樣式組合，從而更好地適應(yīng)復(fù)雜的設(shè)計需求。例如，當(dāng)一個元素獲得焦點(diǎn)時，使其父元素的透明度變?yōu)?100%。

這個新功能大大增強(qiáng)了 Tailwind CSS 的可組合性和靈活性，使開發(fā)者能夠更加精細(xì)地控制樣式和交互行為。

變更內(nèi)容

• PostCSS 插件和 CLI 是獨(dú)立的包：主要的 tailwindcss 包不再包含這些內(nèi)容，因?yàn)椴皇敲總€人都需要它們。相反，它們應(yīng)該分別安裝，使用 @tailwindcss/postcss 和 @tailwindcss/cli。
• 無默認(rèn)邊框顏色：邊框?qū)嵱霉ぞ咭郧澳J(rèn)使用 gray-200，但現(xiàn)在默認(rèn)使用 currentColor，與瀏覽器一致。我們做出這個更改是為了避免在使用 zinc 或 slate 等灰色作為主要顏色時，意外引入錯誤的灰色。
• 環(huán)默認(rèn)是 1px：環(huán)實(shí)用工具以前默認(rèn)是 3px 藍(lán)色環(huán)，現(xiàn)在默認(rèn)是使用 currentColor 的 1px 環(huán)。我們發(fā)現(xiàn)自己在項目中使用 ring-* 實(shí)用工具作為邊框的替代，并使用 outline-* 作為焦點(diǎn)環(huán)，因此我們認(rèn)為在這里保持一致是一個有幫助的更改。

v4.0 的路線圖

• 顯式內(nèi)容路徑配置：當(dāng)自動內(nèi)容檢測對你的設(shè)置不夠好時，可以告訴 Tailwind 你的模板確切在哪里。
• 支持其他暗模式：目前我們只支持使用媒體查詢的暗模式，仍需要重新實(shí)現(xiàn)選擇器和變體策略。
• 前綴支持：目前還沒有辦法為你的類配置前綴，但我們一定會恢復(fù)它。
• 白名單和黑名單：目前無法強(qiáng)制 Tailwind 生成某些類或阻止它生成其他類。
• 重要配置支持：目前還沒有辦法使所有實(shí)用工具生成 !important，但我們計劃實(shí)現(xiàn)它。
• theme() 函數(shù)支持：新項目不需要這個，因?yàn)槟悻F(xiàn)在可以使用 var()，但我們會為了向后兼容而實(shí)現(xiàn)它。
• 獨(dú)立的 CLI：我們還沒有為新引擎開發(fā)獨(dú)立的 CLI，但在 v4.0 發(fā)布之前肯定會有。

結(jié)論

Tailwind CSS 4 是一個強(qiáng)大且多功能的工具，適用于希望簡化工作流程和創(chuàng)建美觀、響應(yīng)式網(wǎng)站的 Web 開發(fā)人員。憑借其增強(qiáng)的性能、擴(kuò)展的調(diào)色板、改進(jìn)的定制、新的實(shí)用工具類以及對無障礙性的關(guān)注，Tailwind CSS 4 將成為開發(fā)人員工具包中的必備工具。無論你是在構(gòu)建小型項目還是大型應(yīng)用程序，Tailwind CSS 4 都提供了實(shí)現(xiàn)你的 Web 設(shè)計所需的功能和靈活性。