Tailwind CSS ユーティリティ規則

18.2.1. クラス順序規則

ユーティリティクラスは以下の順序で記述しなければなりません。

順序	カテゴリ	例
1	レイアウト	flex, grid, block, hidden, relative, absolute
2	ボックスモデル	w-, h-, p-, m-, gap-, border-
3	タイポグラフィ	text-, font-, leading-, tracking-
4	視覚効果	bg-, text-{color}, shadow-, opacity-, rounded-
5	その他	transition-, cursor-, hover:, focus:

手動で順序を管理しません。prettier-plugin-tailwindcss をインストールして自動整列しなければなりません。

npm install -D prettier-plugin-tailwindcss

.prettierrc にプラグインを登録します。

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

• このプラグインは Tailwind CSS 公式推奨順序に従ってクラスを自動整列します。
• 保存時に自動フォーマットが適用されるため、開発者が順序を暗記する必要はありません。
• CI パイプラインで Prettier 検査を実施し、整列されていないクラスをブロックしなければなりません。

---

18.2.2. @apply 使用基準

@apply は同一のクラス組み合わせが 3回以上繰り返される 場合にのみ許可します。

/* 許可: 複数箇所で繰り返し使用されるボタン基本スタイル */
@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md bg-brand-600
           px-4 py-2 text-sm font-medium text-white
           hover:bg-brand-700 focus:outline-none focus:ring-2;
  }
}

/* 禁止: 1〜2箇所でしか使用されないスタイル */
@layer components {
  .my-special-card {
    @apply mt-4 rounded-lg p-6;
  }
}

• @apply を過度に使用すると Tailwind のユーティリティファースト原則が損なわれます。
• 繰り返し回数が3回未満の場合はテンプレートにユーティリティクラスを直接記述します。
• @apply で抽出したクラスは必ず @layer components 内部に定義します。

---

18.2.3. カスタムユーティリティ

プロジェクト固有のデザイントークンは tailwind.config.ts の theme.extend で定義します。

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f5ff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
        success: '#16a34a',
        warning: '#f59e0b',
        error: '#dc2626',
      },
      spacing: {
        '4.5': '1.125rem',
        '13': '3.25rem',
        '15': '3.75rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
} satisfies Config

• デザインシステムで定義した色、間隔、フォントなどを theme.extend に登録します。
• 任意値（[32px]、[#ff0000]）は使用しません。繰り返される値は設定ファイルに登録しなければなりません。
• 1回限りの例外値は任意値構文を許可しますが、コードレビューで設定ファイルへの登録可否を検討します。

---

18.2.4. インラインスタイル禁止

Vue テンプレートで style バインディングを使用しません。Tailwind ユーティリティクラスで代替しなければなりません。

<!-- 禁止: インラインスタイル -->
<div :style="{ padding: '16px', backgroundColor: '#f5f5f5' }">
  内容
</div>

<!-- 正しい例: Tailwind ユーティリティ -->
<div class="bg-gray-100 p-4">
  内容
</div>

例外許可条件

以下の場合に限り :style バインディングを許可します。

• ランタイムで計算される動的な値（例: ユーザー入力に基づく幅、ドラッグ位置）
• CSS 変数を動的に設定する必要がある場合

<!-- 例外許可: ランタイム動的計算値 -->
<div
  class="absolute rounded-lg bg-white shadow-md"
  :style="{ top: `${popoverY}px`, left: `${popoverX}px` }"
>
  ポップオーバー内容
</div>

• 例外使用時はコードレビューで Tailwind ユーティリティへの代替可否を必ず検討します。
• 色、フォント、間隔などデザイントークンに該当する値はインラインスタイルで指定しません。