Tailwind CSSで効率的にレスポンシブデザインを作る

Tailwind CSSで効率的にレスポンシブデザインを作るコツ

Tailwind CSSはユーティリティファーストで、少ないCSSで高速にUIを構築できる強力なフレームワークです。
今回は、効率的にレスポンシブデザインを作るための実践的コツを紹介します。

1. 基本のレスポンシブ設計

Tailwindではブレイクポイントごとにクラスを切り替えられます。

ブレイクポイント	クラス接頭辞
sm (640px〜)	sm:
md (768px〜)	md:
lg (1024px〜)	lg:
xl (1280px〜)	xl:
2xl (1536px〜)	2xl:

<div class="bg-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
  レスポンシブパディング
</div>

上記の例では、画面幅に応じてパディングが自動で変わります。

2. FlexとGridを使った柔軟なレイアウト

2-1. Flexで回り込み

<div class="flex flex-wrap gap-4">
  <div class="w-full sm:w-1/2 lg:w-1/3 bg-amber-200 p-4">Item 1</div>
  <div class="w-full sm:w-1/2 lg:w-1/3 bg-amber-400 p-4">Item 2</div>
  <div class="w-full sm:w-1/2 lg:w-1/3 bg-amber-600 p-4">Item 3</div>
</div>

• grid-cols-1 → スマホは1列
• sm:grid-cols-2 → タブレットで2列
• md:grid-cols-3 → PCで3列

1. レイアウト調整のコツ

2. 最小幅のスマホからデザインを考える
   → モバイルファーストでクラスを組むと自然にレスポンシブになる

3. ユーティリティの組み合わせを意識する
   → flex-wrap + gap + w-1/2 の組み合わせで複雑なグリッドも簡単に実装可能

4. コンポーネント化して再利用
   → @applyやcomponentsディレクトリを使って、共通UIをまとめる

4. 便利なTailwindテクニック

条件付きクラス切り替え（Vue, React）

<div :class="isActive ? 'bg-green-500' : 'bg-gray-300'">
  状態に応じて背景色を切替
</div>

任意のレスポンシブブレイクポイント

/* tailwind.config.js */
theme: {
  extend: {
    screens: {
      'xs': '480px',
    }
  }
}

xs: でカスタムブレイクポイントも簡単に追加可能

5. まとめ

• Tailwindはモバイルファースト＋ユーティリティクラスで簡単にレスポンシブ設計が可能
• FlexやGridの組み合わせで複雑なレイアウトもシンプルに構築
• 再利用可能なコンポーネント化やカスタムブレイクポイントで効率をさらに向上