Tailwind CSS v4:設定檔再見,@theme 你好

  • Tailwind
  • CSS

升上 Tailwind CSS v4 之後,這個專案沒有 tailwind.config.js。整站的設計 token 都寫在 src/styles/global.css 開頭:

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@theme {
  --font-sans: 'Noto Sans TC', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Noto Serif TC', Georgia, serif;
  --color-accent: #96703d;
  --ease-lux: cubic-bezier(0.12, 0.23, 0.17, 0.99);
}

CSS-first 的好處

@theme 裡宣告的變數會同時做兩件事:產生對應的 utility class(text-accent、font-serif、ease-lux),而且它們就是貨真價實的 CSS custom property,任何地方都能用 var(--color-accent) 拿到。設計 token 只有一份,JS 和 CSS 不再各自維護一套。

要換主題色也變得直觀——深色模式想要亮一點的琥珀金,直接在 CSS 裡覆寫變數:

[data-theme='dark'] {
  --color-accent: #e2a55e;
}

所有用到 text-accent 的地方就跟著變了。

自訂 dark variant

這個站的深色模式不是跟隨系統,而是由 <html data-theme="dark"> 控制(使用者可以手動切換)。v4 用一行 @custom-variant 就能改寫 dark: 的觸發條件:

@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));

之後在 HTML 裡照常寫 dark:text-stone-200,但生效的條件變成「祖先有 data-theme="dark"」。:where() 是為了把 specificity 壓到零,避免 variant 產生的選擇器蓋不掉或反過來蓋掉別人。

建置整合

v4 搭配 @tailwindcss/vite plugin,不再需要 PostCSS 設定,Astro 的 Vite 管線直接吃。從安裝到能用,大概只需要五分鐘,體感上比 v3 輕快不少。