Tailwind CSS v4 的 CSS-first 設定方式

看到 Tailwind v4 把設定搬進 CSS，我最想確認的是：原本那些 class 還要不要改？以前放在 tailwind.config.js 的設定，現在可以寫進 CSS 的 @theme，這就是 CSS-first 的主要改變。

同一個品牌色，v3 和 v4 怎麼寫？#

假設網站要用深藍色當品牌色，標題字型選 Georgia。下面用一樣的值比較；兩個專案都先完成對應版本的 Tailwind 安裝。

v3：在 JavaScript 設定檔擴充。

// tailwind.config.js
module.exports = {
  content: ["./index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue}"],
  theme: {
    extend: {
      colors: { brand: "#173f76" },
      fontFamily: { display: ["Georgia", "serif"] },
    },
  },
};

extend 表示保留預設值，再加上自己的顏色和字型；content 則告訴 Tailwind 去哪些檔案找 class。CSS 入口還要放這三行：

/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

v4：把相同設定放進 CSS。

/* app.css */
@import "tailwindcss";
 
@theme {
  --color-brand: #173f76;
  --font-display: Georgia, serif;
}

一般專案的來源檔案由 v4 自動偵測，這個例子不用再列 content 路徑。品牌色對應 --color-brand，字型對應 --font-display。

畫面上的寫法，兩版相同。

<h1 class="text-brand font-display">最新文章</h1>
<button class="bg-brand text-white">訂閱電子報</button>

標題會使用品牌色和 Georgia 字型，按鈕則是品牌底色、白色文字。對這個例子來說，改的是設定放哪裡，HTML 裡的 class 不用一起換。

要注意的是，@theme 需要 Tailwind 在建置時處理；單純把變數放進 :root，不會自動產生 bg-brand 這類 class。設定搬到 CSS 後，顏色也能透過 var(--color-brand) 給一般 CSS 使用，這是我覺得方便的地方。