Tailwind CSS カラー: 完全シェードシステムガイド

Tailwind CSS は、Web 開発で最も広く参照されているカラーシステムの 1 つを備えています。シェード命名規約の 50 から 950 までの数字は、業界標準となり、実際に Tailwind を使用するプロジェクトをはるかに超えた、デザインツール、他の CSS フレームワーク、カスタムデザインシステムに影響を与えています。このシステムがどのように構成されているか、それをどのように拡張するか、そして Tailwind v4 でどのように進化したかを理解することは、実用的なスキルとカラースケール設計の精神モデルの両方を与えます。

デフォルトパレットの概要

Tailwind のデフォルトパレットには、22 のカラーファミリーが含まれており、各ファミリーは 11 のシェード (50 から 950 まで) を持っています。いくつかの選択されたカラー — black、white、transparent、inherit — も単一値ユーティリティとして利用可能です。

デフォルトパレットのコアカラーファミリーは以下の通りです:

グレーファミリー (slate、gray、zinc、neutral、stone) は主に下色によって異なります。slate はブルーグレーのキャストを持ち、stone は暖かく傾斜し、neutral は最も純粋な無彩色です。プロジェクトに適切なグレーファミリーを選択することは、多くの開発者が気づくよりも重要です — slate グレーと stone グレーは、完全な UI で異なります。

シェード命名規約: 50–950

番号付けシステムは一貫した規則に従います: より高い数字はより暗いです。スケールは完全に線形ではありません — Tailwind チームは数学的均一性ではなく知覚的均一性のためにステップをハンドチューニングしています — ですが、関係は信頼できます:

Tailwind のデフォルト blue-500 は #3B82F6 です — 中程度で完全に彩度の高い青で、「正規」Tailwind 青です。blue-600 (#2563EB) は青ボタンの標準ホバー状態です。blue-100 (#DBEAFE) は青バッジの背景です。これらの関係はパレット内のすべてのカラーファミリーで一貫しています。

950 追加

Tailwind v3.3 は、すべてのカラーファミリーに 950 シェードを追加しました。その追加前、900 が最も暗いオプションでしたが、これは一部のカラーファミリーでダークモード背景には明るすぎました。950 シェードはそのギャップを埋めます — 非常に暗いですが、親色相の見える色合いを保ちます。例えば、blue-950 (#172554) は純粋な黒ではなくダークネイビーと読み、ブランドキャラクターを維持するダークモード表面に役立ちます。

カスタムカラーを追加する

デフォルトパレットでカバーされていないブランドカラーを持つプロジェクトの場合、Tailwind の設定ではカスタムカラーファミリーを追加できます。アプローチは Tailwind v3 と v4 で異なります。

Tailwind v3: tailwind.config.js

v3 では、カスタムカラーは、デフォルトに追加するために extend.colors オブジェクトに、または置き換えるために colors オブジェクトに入ります:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        // カスタムブランドカラーファミリーを追加
        brand: {
          50:  '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',  // プライマリブランドカラー
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
        // または新しい名前で既存ファミリーを参照
        primary: colors.indigo,
        danger: colors.red,
      },
    },
  },
};

このカラーを設定した後、bg-brand-500、text-brand-700、border-brand-200 などのクラスを使用できます。

カスタムスケールを生成する

カスタムカラーを追加する際の課題は、単一のブランド 16 進値から完全な 11 シェードスケールを生成することです。これを手作業で行う — 各ステップの明るさを手動で調整する — は一貫性のない結果を生成します。

シェードジェネレータ はこれを自動化します: ブランドのプライマリ 16 進値を入力すると、知覚的に均一なステップで完全な 50–950 スケールを計算し、Tailwind 設定に直接貼り付けることができる値を出力します。例えば、ブランドプライマリが #0EA5E9 (スカイブルー) の場合、ジェネレータは Tailwind のネイティブパレットの明るさカーブに一致するように調整された完全な 11 シェードスケールを生成します。

動的アルファに withOpacityValue を使用する

Tailwind v3 では、カラーユーティリティはスラッシュ構文 (bg-blue-500/50 で 50% 不透明度) によって任意の不透明度をサポートします。v3 でカスタムカラーを定義するときは、withOpacityValue パターンで CSS カスタムプロパティを使用することでこれを機能させることができます:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: 'rgb(var(--color-brand-500) / <alpha-value>)',
        },
      },
    },
  },
};

次に CSS でリアルチャネル値を定義します:

:root {
  --color-brand-500: 14 165 233; /* R G B values of #0EA5E9 */
}

これにより bg-brand-500/30 (30% 不透明度) は生成 CSS で正しく機能します。

カラーを設定で拡張する

カスタムカラーファミリーを超えて、Tailwind 設定ではセマンティックエイリアスと任意の値でパレットを拡張できます。

セマンティックエイリアス

1 つのアプローチ: パレットを参照するセマンティックエイリアスとしてブランドカラーを定義します:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.violet,
        success: colors.green,
        warning: colors.amber,
        danger: colors.red,
        neutral: colors.slate,
      },
    },
  },
};

今、bg-primary-500 は bg-blue-500 と同じ CSS を生成しますが、クラス名は色ではなく目的を伝えます。このパターンはデザイントークンのセマンティック命名アプローチを反映しています — プライマリカラーを青ではなくインディゴにすることに後で決定した場合でも、同じクラスが機能します。

単一値セマンティックカラー

スケールなしで名前付きカラーを望むデザインシステムの場合:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary':    '#0EA5E9',
        'brand-secondary':  '#7C3AED',
        'text-on-primary':  '#FFFFFF',
        'surface-dark':     '#0F172A',
      },
    },
  },
};

bg-brand-primary、text-text-on-primary などとして使用します。

Tailwind v4: CSS 変数アプローチ

Tailwind v4 は根本的に異なるカラーを導入します。JavaScript 設定ファイルの代わりに、デザインシステム全体は CSS カスタムプロパティと CSS ベース設定を使用して定義されます。

@theme ディレクティブ

Tailwind v4 のカラーは CSS ファイルの @theme ディレクティブを使用して定義されます:

@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-brand-950:  #082f49;
}

Tailwind v4 は --color-* カスタムプロパティを読み込み、自動的に対応するユーティリティクラスを生成します: bg-brand-500、text-brand-700、border-brand-200 など。

v4 でのセマンティックカラー

v4 アプローチはセマンティックカラーエイリアスを非常にクリーンにします。標準的な CSS カスタムプロパティを使用するためです:

@import "tailwindcss";

@theme {
  --color-primary:           var(--color-blue-600);
  --color-primary-hover:     var(--color-blue-700);
  --color-primary-subtle:    var(--color-blue-50);

  --color-success:           var(--color-green-600);
  --color-danger:            var(--color-red-600);
  --color-warning:           var(--color-amber-500);
}

今、bg-primary は有効な Tailwind クラスです — そして CSS カスタムプロパティを参照するため、Tailwind 設定に触れずにダークモードブロックまたはテーマセレクタで上書きできます:

[data-theme="dark"] {
  --color-primary: var(--color-blue-400);
}

これは v4 のカラーシステムで最も重要な改善です: テーマ化は純粋な CSS であり、テーマを切り替えるためにビルドステップは必要ありません。

v4 での P3 と OKLCH カラー

Tailwind v4 のデフォルトパレットは知覚的均一性のために内部的に OKLCH 値を使用します。v4 のパレットは、特に暖かい色 (オレンジとイエロー) で、以前のパレットが不均一な明るさステップを持っていた箇所で、色相全体にわたってより視覚的に一貫したステップを生成します。

カラーコンバータ を使用してブランドカラー用の OKLCH 値を生成するときは、@theme ブロックに直接スロットできます:

@theme {
  /* 広色域 P3 ディスプレイサポート用の OKLCH で定義されたブランドカラー */
  --color-brand-500: oklch(60% 0.18 220);
}

最新のブラウザの広色域ディスプレイ (ほとんどの MacBook、iPhone) はこれを P3 カラースペースで描画し、sRGB クリップ同等物よりも著しく活発な青を生成します。

実用的なカラー選択のヒント

ファミリーを効果的に結合する

Tailwind のグレーファミリーは特定のアクセントカラーを補うように設計されていました。いくつかの一般的な組み合わせ:

• slate + blue/indigo — クール、コーポレート、わずかにテック的
• stone + amber/orange — 暖かい、職人的、人間的
• zinc + violet/purple — ニュートラル、モダン、わずかにダーク
• neutral + any — 最も汎用的なグレー、すべてで機能

同じ UI での異なるファミリーのグレーを混ぜる (例えば、1 つの背景に slate-100、別に zinc-200) は微妙な視覚的矛盾を生成します。プロジェクトあたり 1 つのグレーファミリーにコミットします。

100/700 テキストオンバックグラウンドルール

Tailwind でリライアブルなコントラスト安全な組み合わせ: 同じファミリー内での背景上で 700 シェードテキストを使用します。例えば、text-blue-700 on bg-blue-100 は WCAG AA をクリアするエディティブルな青バッジを生成します。非標準的な組み合わせを確認するために コントラストチェッカー を使用します。

ダークモードシェードマッピング

Tailwind でダークモードの一般的なパターンは、シェードスケールを反転させることです — ライトモードで 700 だったものはダークモードで 300 になります:

<p class="text-gray-700 dark:text-gray-300">
  本文テキスト — ライトモードではダークグレー、ダークモードではライトグレー
</p>

<div class="bg-gray-100 dark:bg-gray-800">
  微妙な背景 — ライトではかろうじてグレー、ダークではダーク表面
</div>

この対称性は、Tailwind スケールが 100+900=1000 および 200+800=1000 であるため機能します — シェードペアは知覚される明るさの観点でミラーイメージです。

主な要点

• Tailwind の 22 のカラーファミリーはそれぞれ 50 (ほぼ白) から 950 (ほぼ黒) までの 11 のシェードで広がり、500 がカノニカル「アイデンティティ」シェードで 600 がデフォルト対話状態です。
• プロジェクトあたり 1 つのグレーファミリー (slate、gray、zinc、neutral、または stone) を選択し、一貫して使用します — グレーファミリーを混ぜると微妙な視覚的矛盾を作成します。
• カスタムカラーファミリーは Tailwind v3 では extend.colors で、v4 では @theme で追加されます。シェードジェネレータ は任意の単一ブランド 16 進値から完全な 50–950 スケールを生成します。
• Tailwind v4 では、カラーは @theme の下の CSS カスタムプロパティであり、純粋 CSS テーマ化を可能にします — セマンティックカラー変数を [data-theme="dark"] ブロックで上書きします。
• セマンティックエイリアス (primary: colors.blue) はクラス名が外観ではなく目的を伝えるようにし、将来のブランドカラー変更が生き残り、クラス名リファクタリングなしです。
• カラーコンバータ はすべての 16 進値に OKLCH 同等物を提供します — v4 P3 ディスプレイを活かす広色域カラー定義に役立ちます。