Tailwind 4.0 即將發(fā)布，看起來很不錯！
Tailwind 4.0 將會更快更好。
嘗試當(dāng)前處于 Alpha 狀態(tài)的新功能
安裝 Tailwind 版本 4 的包：
$ npm install tailwindcss@next @tailwindcss/vite@nextVite 配置:
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ù)這些變量提供新的實用程序和變體，讓你可以在標(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 的主題和實用程序，使其更適應(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)一個元素獲得焦點時，使其父元素的透明度變?yōu)?100%。
這個新功能大大增強(qiáng)了 Tailwind CSS 的可組合性和靈活性，使開發(fā)者能夠更加精細(xì)地控制樣式和交互行為。
變更內(nèi)容
- PostCSS 插件和 CLI 是獨立的包：主要的 tailwindcss 包不再包含這些內(nèi)容，因為不是每個人都需要它們。相反，它們應(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)實用工具以前默認(rèn)是 3px 藍(lán)色環(huán)，現(xiàn)在默認(rèn)是使用 currentColor 的 1px 環(huán)。我們發(fā)現(xiàn)自己在項目中使用 ring-* 實用工具作為邊框的替代，并使用 outline-* 作為焦點環(huán)，因此我們認(rèn)為在這里保持一致是一個有幫助的更改。
v4.0 的路線圖
- 顯式內(nèi)容路徑配置：當(dāng)自動內(nèi)容檢測對你的設(shè)置不夠好時，可以告訴 Tailwind 你的模板確切在哪里。
- 支持其他暗模式：目前我們只支持使用媒體查詢的暗模式，仍需要重新實現(xiàn)選擇器和變體策略。
- 前綴支持：目前還沒有辦法為你的類配置前綴，但我們一定會恢復(fù)它。
- 白名單和黑名單：目前無法強(qiáng)制 Tailwind 生成某些類或阻止它生成其他類。
- 重要配置支持：目前還沒有辦法使所有實用工具生成 !important，但我們計劃實現(xiàn)它。
- theme() 函數(shù)支持：新項目不需要這個，因為你現(xiàn)在可以使用 var()，但我們會為了向后兼容而實現(xiàn)它。
- 獨立的 CLI：我們還沒有為新引擎開發(fā)獨立的 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)的定制、新的實用工具類以及對無障礙性的關(guān)注，Tailwind CSS 4 將成為開發(fā)人員工具包中的必備工具。無論你是在構(gòu)建小型項目還是大型應(yīng)用程序，Tailwind CSS 4 都提供了實現(xiàn)你的 Web 設(shè)計所需的功能和靈活性。
