Tailwind CSSでデザインシステムの色を管理する方法

TailwindCSS CSS デザインシステム 設定
結論

tailwind.config.ts の extend に独自のカラーパレットを追加する。 デフォルトの色を上書きせず、プロジェクト固有の色（brand, primaryなど）を定義するのが保守性のコツ。

基本の設定例

プロジェクトのブランドカラーを追加する場合の書き方です。

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#6366f1',
          DEFAULT: '#4f46e5',
          dark: '#4338ca',
        }
      }
    }
  }
}

これで text-brand や bg-brand-light といったクラスが使えるようになります。

🎨 この場でTailwindカラーを検索する

最も近い Tailwind クラス

—

—

透明度への対応

Tailwindのカスタムカラーで bg-brand/50 のような透明度指定を有効にするには、色の値をCSS変数経由で定義するか、関数を使って定義する必要があります。しかし、単にHEX値を直接書いただけでも、最近のTailwind v3以降なら多くの場合で自動的に処理されます。

おすすめの命名規則

  • セマンティックな命名 — blue-500 ではなく primary や action と名付けることで、後で色が青から緑に変わってもコードの修正が最小限で済みます。
  • スケール感を持たせる — 単一の色ではなく、50〜900の数値で濃淡を持たせると、UIのバリエーションに対応しやすくなります。