Tailwind CSS の色の種類と使い方

🎨 カラー指定の基本ルール

Tailwind では 色名-階調 という形式で色を指定します。
例：bg-blue-500, text-red-200, border-gray-800

🟦 主な色グループ

色名説明
grayグレー系（UI全般に）
red赤系（警告やエラー）
yellow黄色系（警告など）
green緑系（成功・安定）
blue青系（リンク・動作）
indigo藍色（少し深みのある青）
purple紫系（高級感や印象的）
pinkピンク系（やわらかい印象）
orangeオレンジ系（目立たせる）
lime, teal, cyan明るい黄緑〜青緑系
sky, emerald, amber, rose自然やエレガントな色合い
neutral, zinc, stone, slateグレーに近い中性色系

🧱 カラーの階調（shade）

各色は次のような階調が用意されています：

50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

🔧 使用例

<div class="bg-blue-500 text-white p-4">青の背景</div>
<p class="text-red-600">エラーメッセージ</p>
<div class="border border-gray-300 p-2">枠線付き</div>
<button class="bg-green-500 hover:bg-green-700 text-white py-2 px-4 rounded">実行</button>

🌗 ダークモードへの対応

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  ダークモード対応テキスト
</div>

🌐 カラー一覧（公式）

Tailwindの色一覧は以下から確認できます：
https://tailwindcss.com/docs/customizing-colors

💡 カスタムカラーの追加

// tailwind.config.js
theme: {
  extend: {
    colors: {
      brand: {
        light: '#3abff8',
        DEFAULT: '#0ea5e9',
        dark: '#0284c7',
      }
    }
  }
}

HTMLでの使用例：

<div class="bg-brand text-white p-4">オリジナルカラー</div>