tailwind-patterns

Tailwind CSS パターン（v4）

CSS ネイティブの設定を備えた、モダンなユーティリティファースト CSS です。

---

1. Tailwind v4 のアーキテクチャ

v3 からの変更点

v3（レガシー）	v4（現行）
tailwind.config.js	CSS ベースの @theme ディレクティブ
PostCSS プラグイン	Oxide エンジン（フルビルドは約5倍、インクリメンタルビルドは100倍超）
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	大型デスクトップ

モバイルファーストの原則

1. モバイル向けのスタイルから記述します（プレフィックスなし）
2. 大きな画面向けの上書きスタイルを、プレフィックスを付けて追加します
3. 例：w-full md:w-1/2 lg:w-1/3

---

5. ダークモード

設定方法

方法	動作	使用する場面
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-cols-[repeat(auto-fit,minmax(250px,1fr))]
非対称（Bento）	grid grid-cols-3 grid-rows-2 と span
サイドバーのレイアウト	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 コンポーネント	動的な場合、JavaScript が必要な場合
CSS の @apply	控えめに使用 — コンポーネントレイヤーが利用できない場合のみ
デザイントークン	再利用可能な値

---

11. アンチパターン

避けること	推奨すること
任意の値をあらゆる場所で使う	デザインシステムのスケールを使う
!important	詳細度を適切に修正する
インラインの style=	ユーティリティを使う
長いクラスリストの重複	コンポーネントを抽出する
v3 の設定と v4 を混在させる	CSS ファーストに完全に移行する
@apply を多用する	コンポーネントを優先する

---

12. パフォーマンスの原則

原則	実装
未使用のものを削除する	v4 では自動
動的なクラスを避ける	テンプレート文字列のクラスを使わない
Oxide を使う	v4 のデフォルト（フルビルドは約5倍、インクリメンタルビルドは100倍超）
ビルドをキャッシュする	CI/CD のキャッシュ

---

覚えておきましょう： Tailwind v4 は CSS ファーストです。CSS 変数、コンテナクエリ、ネイティブ機能を活用してください。設定ファイルは任意になりました。