Tailwind 4.0 將會更快更好。

嘗試當前處于 Alpha 狀態的新功能

安裝 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）中導入 Tailwind

@import "tailwindcss";

那么，現在讓我們關注一下 Tailwind 版本 4 中的新功能：

零配置內容檢測

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

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

現在，只需要一個指令，而且我們將使用帶有特殊指令 @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 根據這些變量提供新的實用程序和變體，讓你可以在標記中使用類似 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;
}

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

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 的主題和實用程序，使其更適應你的項目需求。

組合變體

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

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

index.html：

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

通過這種方式，你可以創建更靈活、更強大的樣式組合，從而更好地適應復雜的設計需求。例如，當一個元素獲得焦點時，使其父元素的透明度變為 100%。

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

變更內容

• PostCSS 插件和 CLI 是獨立的包：主要的 tailwindcss 包不再包含這些內容，因為不是每個人都需要它們。相反，它們應該分別安裝，使用 @tailwindcss/postcss 和 @tailwindcss/cli。
• 無默認邊框顏色：邊框實用工具以前默認使用 gray-200，但現在默認使用 currentColor，與瀏覽器一致。我們做出這個更改是為了避免在使用 zinc 或 slate 等灰色作為主要顏色時，意外引入錯誤的灰色。
• 環默認是 1px：環實用工具以前默認是 3px 藍色環，現在默認是使用 currentColor 的 1px 環。我們發現自己在項目中使用 ring-* 實用工具作為邊框的替代，并使用 outline-* 作為焦點環，因此我們認為在這里保持一致是一個有幫助的更改。

v4.0 的路線圖

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

結論

Tailwind CSS 4 是一個強大且多功能的工具，適用于希望簡化工作流程和創建美觀、響應式網站的 Web 開發人員。憑借其增強的性能、擴展的調色板、改進的定制、新的實用工具類以及對無障礙性的關注，Tailwind CSS 4 將成為開發人員工具包中的必備工具。無論你是在構建小型項目還是大型應用程序，Tailwind CSS 4 都提供了實現你的 Web 設計所需的功能和靈活性。