Tailwind CSSで動的クラスが反映されない原因と@source inline()の考え方

// color という変数に "red" や "blue" が入る
const color = "red";

// ⚠ ビルド時に "bg-red-500" という文字列がファイル上に存在しない！
// Tailwind が見るのは `bg-${color}-500` という文字列だけ
<div className={`bg-${color}-500`}>...</div>

// 同様にNG：オブジェクトから取り出す場合
const colorMap = { error: "red", success: "green" };
<div className={`bg-${colorMap[type]}-500`}>...</div>

// prefix だけ変数にする場合も同様にNG
const size = "lg";
<button className={`text-${size} px-${size}`}>ボタン</button>
// → "text-lg", "px-lg" がビルド後に存在しない

// 後ろだけ変数にするパターンも同様
const level = 500;
<div className={`text-blue-${level}`}>...</div>

// API や props から className がそのまま渡ってくる場合
interface BadgeProps {
  colorClass: string;  // "bg-green-500" などが渡る想定
}

function Badge({ colorClass }: BadgeProps) {
  // 外部から渡された文字列はスキャン時に存在しないことがある
  return <span className={colorClass}>バッジ</span>;
}

// CMSやデータベースから取得した className を直接当てるケース
// <div className={post.themeClass}> のような使い方

// NG例 : 文字列を結合している

const color = "red";
<div className={`bg-${color}-500 text-${color}-700`}>...</div>

// OK例 : 完全なクラス名をオブジェクトで管理する

// 完全なクラス名を値にもつオブジェクト（Tailwind がスキャンで検出できる）
const colorMap = {
  red:   "bg-red-500 text-red-700",
  green: "bg-green-500 text-green-700",
  blue:  "bg-blue-500 text-blue-700",
  } as const;
 
const color: keyof typeof colorMap = "red";
<div className={colorMap[color]}>...</div>

@import "tailwindcss";

/* StatusBadge コンポーネントで使う全カラーパターンを強制出力 */
@source inline("bg-{green,yellow,red,blue,gray}-100");

@source inline("text-{green,yellow,red,blue,gray}-700");

@source inline("border-{green,yellow,red,blue,gray}-200");

// API から渡ってくるステータス値
type Status = "success" | "warning" | "error" | "info" | "neutral";

// ステータスとカラー名のマッピング（完全なクラス名でなく色名だけ管理）
const statusColor: Record<Status, string> = {
  success: "green",
  warning: "yellow",
  error:   "red",
  info:    "blue",
  neutral: "gray",
};

const statusLabel: Record<Status, string> = {
  success: "完了",
  warning: "注意",
  error:   "エラー",
  info:    "情報",
  neutral: "未処理",
};

export function StatusBadge({ status }: { status: Status }) {
  const c = statusColor[status];

  // @source inline() で出力を強制しているので
  // テンプレートリテラルで組み立てても大丈夫
  return (
    <span className={
      `inline-flex items-center gap-1 rounded-full px-3 py-0.5 text-sm font-medium border
       bg-${c}-100 text-${c}-700 border-${c}-200`
    }>
      {statusLabel[status]}
    </span>
  );
}

/* @source inline() の引数は静的な文字列リテラルのみ */
@source inline($colors);          /* NG: CSS 変数は使えない */

@source inline("bg-" + color);  /* NG: 結合も使えない     */


@source inline("bg-{red,green,blue}-500");  /* 静的な文字列のみ OK */

// なぜ開発環境では動くのか：
// Vite の開発サーバーは変更があるたびに差分スキャンを行う
// 動的クラスが「たまたま同じファイルのどこかに書かれていれば」拾われることがある
// しかし本番の完全ビルドでは厳密なスキャンが行われるためスタイルが消える

// よくあるケース：
// 開発中にテスト用で className="bg-red-500" と書いていたコードを消したとき
// → 開発中は残っていたが本番ビルドで初めて問題が顕在化する