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のバリエーションに対応しやすくなります。

関連記事

この記事は フロントエンド・CSS テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
CSS Grid vs FlexboxCSS Grid vs Flexbox｜どっちを使う？使い分けと実戦レイアウト
CSS Container Queries 完全ガイドCSS Container Queries 完全ガイド｜@container・size vs inline-size・コンポーネント単位レスポンシブ
CSSですりガラス（Glassmorphism）を作る方法CSSですりガラス（Glassmorphism）を作る方法｜backdrop-filterの使い方
CSSで浮き出るカードを作るCSSで浮き出るカードを作る｜きれいなbox-shadowの数値設定
CSSの単位はpxとremどちらが良い？CSSの単位はpxとremどちらが良い？｜基準16pxの理由と使い分け
Fluid Typographyの作り方Fluid Typographyの作り方｜vwとclampでレスポンシブ対応を自動化
line-height計算 - 読みやすい行間をフォントサイズから算出line-height計算 - 読みやすい行間をフォントサイズから算出
色のコントラストチェック色のコントラストチェック｜color contrastの使い方と注意点
React SSR Hydration Mismatch 原因と修正React SSR Hydration Mismatch 原因と修正｜Next.js・Astro対応ガイド
HTML Popover API 完全ガイドHTML Popover API 完全ガイド｜popover・popovertarget・light dismiss・アクセシビリティ
Tailwind ColorTailwind Color｜カスタムパレットと class 名
CSSの「RGBA」各文字の意味とは？ 透明度の指定方法を解説CSSの「RGBA」各文字の意味とは？ 透明度の指定方法を解説