tailwind-css-patterns

Tailwind CSS 開発パターン

Tailwind CSS のユーティリティファーストフレームワークを使用して、モダンでレスポンシブなユーザーインターフェースを構築するためのエキスパートガイドです。CSS ファーストの設定、カスタムユーティリティ、開発者エクスペリエンスの向上など、v4.1 以降の機能を紹介します。

概要

Tailwind CSS v4.1 以降を使用して、レスポンシブでアクセシブルな UI を構築するための実践的なパターンを紹介します。ユーティリティの組み合わせ、ダークモード、コンポーネントのパターン、パフォーマンスの最適化を取り上げます。

使用する場面

• React／Vue／Svelte のコンポーネントのスタイリング
• レスポンシブなレイアウトやグリッドの構築
• デザインシステムの実装
• ダークモードへの対応
• CSS ワークフローの最適化

クイックリファレンス

レスポンシブブレークポイント

プレフィックス	最小幅	説明
sm:	640px	小さな画面
md:	768px	タブレット
lg:	1024px	デスクトップ
xl:	1280px	大きな画面
2xl:	1536px	特に大きな画面

よく使われるパターン

<div class="flex items-center justify-center min-h-screen">
  Content
</div>


<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  
</div>


<div class="bg-white rounded-lg shadow-lg p-6">
  <h3 class="text-xl font-bold">Title</h3>
  <p class="text-gray-600">Description</p>
</div>

手順

1. モバイルファーストで始める：モバイル向けの基本スタイルを記述し、大きな画面にはレスポンシブプレフィックス（sm:、md:、lg:）を追加します
2. デザイントークンを使う：Tailwind のスペーシング、カラー、タイポグラフィのスケールを活用します
3. ユーティリティを組み合わせる：複数のユーティリティを組み合わせて複雑なスタイルを作成します
4. コンポーネントを抽出する：繰り返し使うパターンには、再利用可能なコンポーネントクラスを作成します
5. テーマを設定する：tailwind.config.js または @theme を使ってデザイントークンをカスタマイズします
6. 変更を検証する：DevTools のレスポンシブモードを使い、各ブレークポイントでテストします。コミットする前に、表示のリグレッションやアクセシビリティの問題がないか確認します。

例

レスポンシブカードコンポーネント

function ProductCard({ product }: { product: Product }) {
  return (
    <div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
      <img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
      <div className="p-6">
        <h3 className="text-lg font-semibold">{product.name}</h3>
        <button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
          Add to Cart
        </button>
      </div>
    </div>
  );
}

ダークモードの切り替え

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 class="dark:text-white">Title</h1>
</div>

フォーム入力

<input
  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="[email protected]"
/>

ベストプラクティス

1. スペーシングを統一する：Tailwind のスペーシングスケール（4、8、12、16 など）を使います
2. カラーパレット：一貫性を保つため、Tailwind のカラーシステムを使用します
3. コンポーネントの抽出：繰り返し使うパターンを、再利用可能なコンポーネントに抽出します
4. ユーティリティの組み合わせ：保守性を高めるため、@apply よりユーティリティクラスを優先します
5. セマンティック HTML：適切な HTML 要素と Tailwind クラスを使用します
6. パフォーマンス：最適な CSS のパージのため、コンテンツパスにすべてのテンプレートファイルが含まれていることを確認します
7. アクセシビリティ：フォーカススタイルと ARIA ラベルを設定し、ユーザー設定（動きを抑える設定）を尊重します

トラブルシューティング

クラスが適用されない

• コンテンツパスを確認する：設定の content: [] にすべてのテンプレートファイルが含まれていることを確認します
• ビルドを確認する：npm run build を実行して、パージ済み CSS を再生成します
• 開発モード：ライブ更新には --watch フラグを付けて npx tailwindcss -o を使用します

レスポンシブスタイルが機能しない

• 順序が重要です：レスポンシブプレフィックスは、レスポンシブでないクラスより前に指定する必要があります（例：flex md:flex ではなく md:flex）
• ブレークポイントの値を確認する：ブレークポイントがデザイン要件に合っていることを確認します
• DevTools：ブラウザーの DevTools のレスポンシブモードを使い、各ブレークポイントでテストします

ダークモードの問題

• 設定を確認する：darkMode: 'class' または 'media' が正しく設定されていることを確認します
• 切り替えの実装：クラス方式では document.documentElement.classList.toggle('dark') を使用します
• 初期表示時のちらつき：body が描画される前に <html> に dark クラスを追加します

制約と警告

• クラスの増加：長いクラス文字列は可読性を低下させるため、コンポーネントに抽出します
• コンテンツパス：パスの設定を誤ると、本番環境でクラスがパージされます
• 任意の値：使用は最小限にとどめ、一貫性を保つためデザイントークンを優先します
• 詳細度の問題：複雑なセレクターと @apply の併用は避けます
• ダークモード：正しい設定（class または media 方式）が必要です
• ブラウザー対応：互換性に関する注意事項は Tailwind のドキュメントで確認します

参考資料

• references/layout-patterns.md — Flexbox、グリッド、スペーシング、タイポグラフィ、色
• references/component-patterns.md — カード、ナビゲーション、フォーム、モーダル、React のパターン
• references/responsive-design.md — レスポンシブのパターン、ダークモード、コンテナクエリ
• references/animations.md — トランジション、変形、組み込みアニメーション、モーション設定
• references/performance.md — バンドルの最適化、CSS の最適化、本番ビルド
• references/accessibility.md — フォーカス管理、スクリーンリーダー、色のコントラスト、ARIA
• references/configuration.md — CSS ファースト設定、JavaScript 設定、プラグイン、プリセット
• references/reference.md — その他の参考資料

外部リソース

• Tailwind CSS ドキュメント
• Tailwind UI
• Tailwind Play