CSS
Tailwind CSS
Tailwind CSS v4の導入方法、@themeディレクティブ、ユーティリティクラス利用ポリシー
導入方法
本番環境では、以下のいずれかの方法で Tailwind CSS v4 を導入してください。
- PostCSS プラグイン
既存のビルドプロセスに統合する場合 - Tailwind CLI
スタンドアロンで CSS を生成する場合 - フレームワーク固有の統合
Next.js、Vite、Nuxt などのフレームワークが提供する統合方法
v4 では、tailwind.config.js は不要になり、CSS ファイル内の @theme ディレクティブでテーマを定義します。
本番環境での CDN 利用禁止
Play CDN は開発・プロトタイプ用途に限定されています。
本番環境では、PostCSS や Tailwind CLI を使用してビルド済みの CSS ファイルを生成し、使用してください。
本番環境では、PostCSS や Tailwind CLI を使用してビルド済みの CSS ファイルを生成し、使用してください。
コードスタイル
クラス順序
カスタムテーマ・デザイントークンの運用
@theme ディレクティブの使用
Tailwind CSS v4 では、@theme ディレクティブを使用してテーマ変数を定義します。
既存の CSS 変数 や フォント設定 を Tailwind のテーマ変数として統合できます。
@import "tailwindcss";
@theme {
/* カラー */
--color-primary: #0070f3;
--color-secondary: #555;
--color-bg: #fff;
/* スペーシング */
--spacing-sm: 0.5rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
/* フォント */
--font-family-sans: "Helvetica Neue", Arial, sans-serif;
}
@theme ディレクティブで定義した変数は、自動的にユーティリティクラスとして利用可能になります。
<!-- テーマ変数から生成されたユーティリティクラスを使用 -->
<div class="bg-primary text-white p-md">コンテンツ</div>
テーマ変数の推奨
プロジェクト全体で一貫して使用する値は、
@theme ディレクティブでテーマ変数として定義してください。CSS 変数との統合
既存の CSS 変数を @theme ディレクティブで参照することで、CSS 変数と Tailwind テーマを統合できます。
@import "tailwindcss";
/* 既存の CSS 変数を定義 */
:root {
--color-primary: #0070f3;
--color-bg: #fff;
}
/* Tailwind テーマ変数として参照 */
@theme {
--color-primary: var(--color-primary);
--color-bg: var(--color-bg);
}
/* ダークモードのテーマ切り替え */
:root[data-theme="dark"] {
--color-primary: #66bee7;
--color-bg: #222;
}
これにより、CSS 変数の変更が自動的に Tailwind のユーティリティクラスに反映されます。
<!-- テーマ変数から生成されたユーティリティクラスを使用 -->
<div class="bg-bg text-primary">コンテンツ</div>
@apply ディレクティブの使用
@apply ディレクティブは、繰り返し使用されるユーティリティクラスの組み合わせをコンポーネントクラスに抽出する場合に使用します。
/* ✅ 良い例：繰り返し使用されるパターンを @apply で抽出 */
.button {
@apply px-4 py-2 rounded font-medium;
}
.button--primary {
@apply bg-blue-500 text-white;
}
ただし、@apply の多用は避け、以下の場合にのみ使用してください。
- フレームワーク等でコンポーネント化できない場合（WordPress 等）
- コンポーネントとして再利用される場合
- 同じユーティリティクラスの組み合わせが 3 回以上繰り返される
- プロジェクト全体で一貫したスタイルが必要
ユーティリティクラス利用ポリシー
Arbitrary values の使用を控える
Tailwind のクラス名をむやみに増やさないため、text-[◯◯] のような Arbitrary values（任意値）はなるべく使わないでください。
<!-- ❌ 悪い例：Arbitrary values を多用 -->
<div class="text-[#0070f3] text-[16px]">コンテンツ</div>
<!-- ✅ 良い例：テーマ変数や標準のユーティリティクラスを使用 -->
<div class="text-primary text-base">コンテンツ</div>
@theme ディレクティブの利用
Arbitrary values を使用する場合は、できる限り
@theme ディレクティブでテーマ変数として定義してください。従来の CSS に残すべき場面
以下の場合は、従来の CSS で記述しても構いません。
- 複雑なアニメーション
複数のキーフレームや複雑なトランジションが必要な場合 - コンポーネント固有のスタイル
再利用可能なコンポーネントのスタイル定義（BEM クラスを使用）