tailwind-patterns

Tailwind CSS パターン（v4 - 2025）

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

---

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	大型デスクトップ

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

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 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. タイポグラフィシステム

フォントスタックのパターン

種類	推奨
Sans	'Inter', 'SF Pro', system-ui, sans-serif
Mono	'JetBrains Mono', 'Fira Code', monospace
Display	'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 では自動
動的な指定を避ける	テンプレート文字列によるクラスを使わない
Oxide を使う	v4 でデフォルト、10倍高速
ビルドをキャッシュ	CI/CD でのキャッシュ

---

注意: Tailwind v4 は CSS ファーストです。CSS 変数、コンテナクエリ、ネイティブ機能を積極的に活用してください。設定ファイルは現在オプションです。