Tailwind CSS v4 の @theme で色と余白を一本化する

v3 との一番大きな違い

Tailwind v4 の最大の変化は、設定ファイルが JavaScript から CSS に移ったことです。tailwind.config.ts がなくなり、CSS 内で @theme ディレクティブを使ってトークンを定義します。

@import "tailwindcss";

@theme {
  --color-brand: #0F766E;
  --font-sans: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --radius-lg: 0.75rem;
}

トークン命名の規則

• 色は --color-<name> → bg-<name>, text-<name>, border-<name> が自動生成される
• フォントは --font-<name> → font-<name>
• 半径は --radius-<name> → rounded-<name>
• ブレークポイントは --breakpoint-<name>

メリット

• 単一ソース: デザイナと実装者が同じ :root を見れば良い
• 実行時切り替え: ダークモードも CSS 変数で完結
• 設定の型がいらない: TypeScript の型解決問題が消える

まとめ

@theme ベースの設定は、デザイントークンを「CSS の一等市民」として扱えるようになる大きな一歩です。命名規則さえ押さえれば Tailwind の強みを生かしたまま、よりデザインシステム寄りの運用ができます。