Tailwind CSS v4 新功能介紹

Tailwind CSS v4 帶來了一些令人興奮的新功能和改進。讓我們來看看主要的變化。

主要改變

1. CSS-First 配置

在 v4 中，配置改為在 CSS 檔案中進行：

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --font-sans: ui-sans-serif, system-ui;
}

不再需要 tailwind.config.js 檔案（雖然仍可選用）。

2. 簡化的 PostCSS 設定

只需要一個簡單的 PostCSS 設定：

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

3. 自動內容偵測

v4 會自動偵測你的內容，不需要手動設定 content 路徑。

4. 效能提升

• 更快的建置時間
• 更小的 CSS 檔案大小
• 更好的 tree-shaking

遷移指南

從 v3 遷移到 v4：

1. 更新套件版本
2. 更新 PostCSS 設定
3. 將 @tailwind 指令改為 @import "tailwindcss"
4. 將配置移到 CSS 的 @theme 區塊

範例

@import "tailwindcss";

@theme {
  --color-brand: #ff6b6b;
  --font-display: "Inter", sans-serif;
  
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

然後在元件中使用：

<div className="text-brand font-display">
  使用自訂主題
</div>

Tailwind CSS v4 讓樣式開發變得更加直觀和高效！