Tailwind CSS のパターン（v4 - 2025）
CSS ネイティブの設定を備えた、モダンなユーティリティファースト CSS です。
使用する場面
Tailwind v4 を設定するとき、CSS ファーストのテーマやデザイントークンを使用するとき、またはコンテナクエリやモダンな Tailwind のパターンを実装するときに、このスキルを使用します。
1. Tailwind v4 のアーキテクチャ
v3 からの変更点
| v3（レガシー） | v4（現行） |
|---|
tailwind.config.js | CSS ベースの @theme ディレクティブ |
| PostCSS プラグイン | Oxide エンジン（10 倍高速） |
| JIT モード | ネイティブで常時有効 |
| プラグインシステム | CSS ネイティブ機能 |
@apply ディレクティブ | 引き続き動作しますが、非推奨です |
v4 の主要概念
| 概念 | 説明 |
|---|
| CSS ファースト | JavaScript ではなく、CSS で設定します |
| Oxide エンジン | Rust ベースのコンパイラーで、より高速です |
| ネイティブのネスティング | PostCSS を使わない CSS ネスティング |
| CSS 変数 | すべてのトークンが --* 変数として公開されます |
2. CSS ベースの設定
テーマの定義
@theme {
/* Colors - use semantic names */
--color-primary: oklch(0.7 0.15 250);
--color-surface: oklch(0.98 0 0);
--color-surface-dark: oklch(0.15 0 0);
/* Spacing scale */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
拡張と上書きを使い分ける場面
| 操作 | 使用する場面 |
|---|
| 拡張 | デフォルト値に新しい値を追加する場合 |
| 上書き | デフォルトのスケール全体を置き換える場合 |
| セマンティックトークン | プロジェクト固有の命名（primary、surface）を使う場合 |
3. コンテナクエリ（v4 ネイティブ）
ブレークポイントとコンテナ
| 種類 | 何に応じるか |
|---|
ブレークポイント（md:） | ビューポートの幅 |
コンテナ（@container） | 親要素の幅 |
コンテナクエリの使い方
| パターン | クラス |
|---|
| コンテナを定義 | 親要素に @container |
| コンテナのブレークポイント | 子要素に @sm:、@md:、@lg: |
| 名前付きコンテナ | より具体的に指定する @container/card |
使用する場面
| シナリオ | 使用するもの |
|---|
| ページレベルのレイアウト | ビューポートのブレークポイント |
| コンポーネントレベルのレスポンシブ対応 | コンテナクエリ |
| 再利用可能なコンポーネント | コンテナクエリ（コンテキストに依存しない） |
4. レスポンシブデザイン
ブレークポイントシステム
| プレフィックス | 最小幅 | 対象 |
|---|
| （なし） | 0px | モバイルファーストの基本スタイル |
sm: | 640px | 大型スマートフォン／小型タブレット |
md: | 768px | タブレット |
lg: | 1024px | ノートパソコン |
xl: | 1280px | デスクトップ |
2xl: | 1536px | 大型デスクトップ |
モバイルファーストの原則
- モバイル向けのスタイルを最初に記述します（プレフィックスなし）
- より大きな画面向けの上書きスタイルをプレフィックス付きで追加します
- 例：
w-full md:w-1/2 lg:w-1/3
5. ダークモード
設定方法
v4 では、デフォルトのダークバリアントはメディアクエリに従います。CSS ファーストの設定でクラスセレクターを使うには、@custom-variant dark (&:where(.dark, .dark *)); を定義します。以下の表は動作の選択肢を説明するものであり、v4 の JavaScript 設定キーではありません。
| 方法 | 動作 | 使用する場面 |
|---|
class | .dark クラスで切り替えます | 手動のテーマ切り替え |
media | システム設定に従います | ユーザーによる操作が不要な場合 |
selector | カスタムセレクター（v4） | 複雑なテーマ設定 |
ダークモードのパターン
| 要素 | ライト | ダーク |
|---|
| 背景 | bg-white | dark:bg-zinc-900 |
| テキスト | text-zinc-900 | dark:text-zinc-100 |
| ボーダー | border-zinc-200 | dark:border-zinc-700 |
6. モダンなレイアウトパターン
Flexbox のパターン
| パターン | クラス |
|---|
| 両軸方向の中央揃え | flex items-center justify-center |
| 縦方向の積み重ね | flex flex-col gap-4 |
| 横方向の行 | flex gap-4 |
| 両端揃え | flex justify-between items-center |
| 折り返しグリッド | flex flex-wrap gap-4 |
Grid のパターン
| パターン | クラス |
|---|
| 自動調整によるレスポンシブ対応 | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| 非対称（Bento） | スパンを指定した grid grid-cols-3 grid-rows-2 |
| サイドバーレイアウト | grid grid-cols-[auto_1fr] |
注： 対称な 3 列グリッドよりも、非対称／Bento レイアウトを推奨します。
7. モダンなカラーシステム
OKLCH と RGB/HSL の比較
| 形式 | 長所 |
|---|
| OKLCH | 知覚的に均一で、デザインに適しています |
| HSL | 色相と彩度を直感的に扱えます |
| RGB | 旧来の環境との互換性があります |
カラートークンのアーキテクチャ
| レイヤー | 例 | 目的 |
|---|
| プリミティブ | --blue-500 | 生の色値 |
| セマンティック | --color-primary | 用途に基づく命名 |
| コンポーネント | --button-bg | コンポーネント固有 |
8. タイポグラフィシステム
フォントスタックのパターン
| 種類 | 推奨 |
|---|
| サンセリフ | 'Inter', 'SF Pro', system-ui, sans-serif |
| 等幅 | 'JetBrains Mono', 'Fira Code', monospace |
| ディスプレイ | 'Outfit', 'Poppins', sans-serif |
文字サイズのスケール
| クラス | サイズ | 用途 |
|---|
text-xs | 0.75rem | ラベル、キャプション |
text-sm | 0.875rem | セカンダリテキスト |
text-base | 1rem | 本文 |
text-lg | 1.125rem | リード文 |
text-xl+ | 1.25rem+ | 見出し |
9. アニメーションとトランジション
組み込みアニメーション
| クラス | 効果 |
|---|
animate-spin | 連続回転 |
animate-ping | 注意を促すパルス |
animate-pulse | 控えめな不透明度のパルス |
animate-bounce | 跳ねる効果 |
トランジションのパターン
| パターン | クラス |
|---|
| すべてのプロパティ | transition-all duration-200 |
| 特定のプロパティ | transition-colors duration-150 |
| イージングを指定 | ease-out または ease-in-out |
| ホバー効果 | hover:scale-105 transition-transform |
10. コンポーネントの抽出
抽出するタイミング
| 兆候 | 対応 |
|---|
| 同じクラスの組み合わせが3回以上 | コンポーネントを抽出 |
| 複雑な状態のバリエーション | コンポーネントを抽出 |
| デザインシステムの要素 | 抽出してドキュメント化 |
抽出方法
| 方法 | 使用する場面 |
|---|
| React/Vue コンポーネント | 動的で、JS が必要 |
| CSS の @apply | 静的で、JS が不要 |
| デザイントークン | 再利用可能な値 |
11. アンチパターン
| 避けること | 推奨すること |
|---|
| 任意の値をあらゆる場所で使う | デザインシステムのスケールを使う |
!important | 詳細度を適切に修正する |
インラインの style= | ユーティリティを使う |
| 長いクラスリストを重複させる | コンポーネントを抽出する |
| v3 の設定と v4 を混在させる | CSS ファーストに完全移行する |
@apply を多用する | コンポーネントを優先する |
12. パフォーマンスの原則
| 原則 | 実装 |
|---|
| 未使用分を除去 | v4 では自動 |
| 動的な使い方を避ける | テンプレート文字列のクラスを使わない |
| サポートされているビルド統合を使う | 実際のプロジェクトでベンチマークを行う。普遍的な高速化はありません |
| ビルドをキャッシュする | CI/CD キャッシュ |
覚えておきましょう： Tailwind v4 は CSS ファーストです。CSS 変数、コンテナークエリ、ネイティブ機能を活用してください。設定ファイルは任意になりました。
制限事項
- このスキルは、タスクが上記の範囲に明確に当てはまる場合にのみ使用してください。
- 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
- 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認してください。
