CSS変数を使ったTailwind CSSカスタムカラー

CSS変数とTailwind CSSの統合

Tailwind CSSは設定内でCSSカスタムプロパティの参照をサポートしています。このアプローチにより、ユーティリティクラスのワークフローを維持しながら、CSS変数の実行時切り替えの利点が得られます。

ステップ1 — 変数の定義

:root {
  --color-brand-50:  #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-200: #c7d2fe;
  --color-brand-300: #a5b4fc;
  --color-brand-400: #818cf8;
  --color-brand-500: #6366f1;
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;
  --color-brand-800: #3730a3;
  --color-brand-900: #312e81;
  --color-brand-950: #1e1b4b;
}

ステップ2 — tailwind.config.jsで参照

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  'var(--color-brand-50)',
          100: 'var(--color-brand-100)',
          // ... 950まで
        },
      },
    },
  },
};

ステップ3 — ユーティリティクラスの使用

<button class="bg-brand-500 text-brand-50 hover:bg-brand-600">
  Click me
</button>

実行時のテーマ切り替え

実際のカラー値がCSS変数にあるため、テーマの切り替えは:rootブロックのオーバーライドだけで済み、リビルドは不要です。これはshadcn/uiのようなコンポーネントライブラリがテーマを処理する方法です。

注意点

Tailwindの不透明度修飾子（例：bg-brand-500/50）は、値がvar()を経由したプレーンな16進数の場合は動作しません。不透明度修飾子を有効にするには、変数を生のHSLまたはRGBチャンネルとして定義し、設定でhsl(var(--color-brand-500))として再構成します。