Tailwind CSS v4の@themeでデザイントークンを管理する方法

@import "tailwindcss";

@theme {
  /*
   * --プレフィックス-名前: 値;
   *
   * プレフィックスがユーティリティのカテゴリを決める
   * 例： --color-*   → bg-* / text-* / border-* など
   *      --spacing-* → p-* / m-* / gap-* など
   *      --font-*    → font-* クラス
   */

  --color-brand-500:  #0ea5e9;   /* → bg-brand-500, text-brand-500 ... */
  --spacing-18:       4.5rem;    /* → p-18, m-18, gap-18 ...           */
  --font-sans:        "Noto Sans JP", ui-sans-serif;  /* → font-sans */
  --radius-card:      12px;      /* → rounded-card                     */
}

@import "tailwindcss";

@theme {
  /* ─── ブランドカラー（スカイブルー系） ─── */
  --color-brand-50:  #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;   /* メインカラー */
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;   /* ホバー時 */
  --color-brand-800: #075985;
  --color-brand-900: #0c4a6e;

  /* ─── セマンティックカラー（意味で命名） ─── */
  --color-success:   #22c55e;   /* 成功・OK → text-success, bg-success */
  --color-warning:   #f59e0b;   /* 注意     */
  --color-danger:    #ef4444;   /* エラー   */
  --color-muted:     #6b7280;   /* グレーアウト */
}

// ブランドカラーを使ったボタン
<button className="bg-brand-500 hover:bg-brand-700 text-white px-4 py-2 rounded">
  送信
</button>

// セマンティックカラーでバッジを作る
<span className="bg-success/10 text-success border border-success/20 rounded px-2 py-0.5 text-sm">
  完了
</span>

// /10 は不透明度10%を意味する（v4でもそのまま使える）
<div className="bg-danger/5 border-l-4 border-danger text-danger p-4">
  エラーが発生しました
</div>

@theme {
  /* ─── フォントファミリー ─── */
  --font-sans:  "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Noto Serif JP", ui-serif, Georgia, serif;
  --font-mono:  "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* ─── フォントサイズ（カスタムスケールを追加） ─── */
  /* 既存の text-sm / text-base / text-lg はそのまま使える */
  /* ここでは「見出し専用のサイズ」を追加する例 */
  --text-display:   3.5rem;   /* → text-display */
  --text-headline:  2.25rem;  /* → text-headline */
  --text-subhead:   1.125rem; /* → text-subhead */

  /* ─── 行間 ─── */
  --line-height-relaxed-ja: 1.9;   /* → leading-relaxed-ja（日本語長文向け）*/
  --line-height-tight-ja:   1.3;   /* → leading-tight-ja（見出し向け）      */

  /* ─── 字間 ─── */
  --letter-spacing-ja: 0.04em;  /* → tracking-ja（日本語本文向け） */
}

@theme {
  /* ─── スペーシング追加 ─── */
  /* デフォルトの p-4 (1rem) / p-8 (2rem) はそのまま使える */
  --spacing-18:  4.5rem;   /* → p-18 / m-18 / gap-18 ... */
  --spacing-22:  5.5rem;   /* → p-22 など                */
  --spacing-128: 32rem;    /* → max-w-128 など           */

  /* ─── コンポーネントサイズ（意味のある名前で管理）─── */
  --spacing-header:  4rem;    /* → h-header（ヘッダーの高さ）*/
  --spacing-sidebar: 16rem;   /* → w-sidebar（サイドバー幅） */
  --spacing-content: 52rem;   /* → max-w-content（本文幅）  */

  /* ─── 角丸 ─── */
  --radius-card:   12px;  /* → rounded-card */
  --radius-button: 8px;   /* → rounded-button */
  --radius-badge:  4px;   /* → rounded-badge */
}

@theme {
  /* 追加トークン */
  --color-brand-500: #0ea5e9;
}

@theme inline {

  /*
   * 既存の --color-white を「ほぼ白」に差し替える
   * これにより bg-white / text-white の実際の色が変わる
   */
  --color-white: #fafaf9;  /* 真っ白より少し暖かい白 */

  --color-black: #1a1a1a;  /* 真っ黒より柔らかい黒  */

}