Tailwind CSS v4 グローバルクラス設定

問題概要

Tailwind CSS v4を新規Viteプロジェクトで導入した際、従来のtailwind.config.jsファイルがデフォルトで生成されません。この変更により、以下の設定方法が不明確になります：

1. containerクラスのXLブレークポイント後のmax-width値の設定方法
2. レスポンシブ対応（RWD）やホバー効果を持つカスタムクラスの追加方法

---

解決方法

Tailwind v4には設定ファイルの取り扱いが変わりましたが、後方互換性があります。2つのアプローチを選べます。

方法 1: 従来型 JavaScript設定ファイル (推奨: 移行プロジェクト向け)

1. tailwind.config.jsをプロジェクトルートに作成
2. CSSエントリファイルで明示的に設定をロード

/* 設定ファイルの明示的ロード */
@config "./tailwind.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    maxWidth: {
      'xl': '1280px' /* XLブレークポイントの最大幅 */
    },
    extend: {
      screens: {
        '3xl': '1920px' /* カスタムブレークポイント追加 */
      },
      colors: {
        avocado: {
          100: '#f0f7e8',
          200: '#d9ecc4'
        }
      }
    }
  }
}

方法 2: CSSファースト設定 (推奨: 新規プロジェクト向け)

CSSファイル内で直接テーマ設定が可能です：

@theme {
  /* containerのXLブレークポイント設定 */
  --max-width-xl: 1280px;
  
  /* カスタムブレークポイント追加 */
  --breakpoint-3xl: 1920px;
  
  /* カスタムカラーパレット */
  --color-avocado-100: #f0f7e8;
  --color-avocado-200: #d9ecc4;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

---

カスタムクラスの追加例

レスポンシブ対応＋ホバー効果のあるカスタムボタン：

@layer components {
  .custom-btn {
    @apply bg-avocado-200 text-gray-800 rounded-lg;
    
    /* ホバー時のアニメーション */
    transition: all 0.3s ease-in-out;
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    /* レスポンシブ設定 */
    padding: 8px 16px;
    @screen md {
      padding: 12px 24px;
    }
    @screen xl {
      padding: 16px 32px;
    }
  }
}

主要ディレクティブの機能

ディレクティブ	用途	例
@config	JS設定ファイルの指定	@config "./config.js"
@theme	CSS内テーマカスタマイズ	--max-width-xl:1280px
@screen	メディアクエリ適用	@screen md { ... }
@layer	カスタムクラスタイプの定義	@layer components

---

パッケージプラグインの統合方法

/* typographyプラグインの導入例 */
@plugin "@tailwindcss/typography";

/* ローカルプラグインファイルの場合 */
@plugin "../plugins/custom-plugin";

---

ベストプラクティス

1. 新規プロジェクト → CSSファースト方式を推奨（設定集中化で管理容易）
2. v3からの移行 → @configを利用して既存設定を段階移行
3. テーマ変数 → --color-name-shade形式でOKLCH/HEX/RGBいずれも使用可能
4. 設定の拡張 → @layerで追加クラスをcomponents/utilitiesに分類

公式ドキュメント参照：

• テーマカスタマイズ
• ディレクティブ一覧
• 設定移行ガイド