Tailwind CSSとは

Tailwindとは？

Tailwind CSS は「ユーティリティファーストCSSフレームワーク」です。
あらかじめ用意されたクラス（例: flex, text-center, bg-blue-500）をHTMLに直接書くことで、素早くスタイリングができます。

Tailwind設定ファイル

tailwind.config.js（または tailwind.config.ts）は、Tailwind CSS のカスタマイズ設定ファイルです。
プロジェクトのデザインルールや利用するファイル範囲を定義します。

構成例

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        'wizard-gradient': 'linear-gradient(135deg, #3b82f6 0%, #1e40af 50%, #1e3a8a 100%)',
      },
      colors: {
        brand: {
          white: '#FFFFFF',
          blue: '#073A93',
          lightGray: '#F7F7F7',
          border: '#D3D3D3',
          text: '#757575',
          dark: '#333333',
        }
      }
    },
  },
  darkMode: "class",
  plugins: [],
}

1. content

Tailwind がどのファイルをスキャンしてクラスを抽出するかを指定する。
これを設定しないとビルド後に必要なCSSが生成されない。

2. theme

プロジェクト全体のデザインルールを定義する。
extend を使うことで Tailwind のデフォルト設定を拡張できる。

3. darkMode

"media" : OSの設定に応じて自動切り替え
"class" : .dark クラスを付与したときに切り替え

4. plugins

Tailwind の機能を拡張するプラグインを登録できる。

設定した値の使い方（上記構成例の場合）

カスタムカラー

<!-- 背景に brand.blue を使う -->
<div class="bg-brand-blue text-white p-4">
  カスタムカラーを適用
</div>

<!-- 文字色に brand.dark を使う -->
<p class="text-brand-dark">
  文字色をカスタムカラーに
</p>