レスポンシブデザイン — ブレークポイントモディファイア - Tailwind CSS実践ガイド

Tailwindのレスポンシブ対応は、クラス名にプレフィックスを付けるだけです。

学習者

スマホとPCで見た目を変えたいけど、メディアクエリをCSSに書くのが面倒で…。Tailwindだと楽になる？

先生

md:flex のように幅のプレフィックスを付けるだけ。メディアクエリを手書きせずにレスポンシブが組めるよ。

ブレークポイントプレフィックス

プレフィックス	幅	対象
（なし）	全幅（モバイル）	デフォルト
`sm:`	640px〜	大きめスマートフォン
`md:`	768px〜	タブレット
`lg:`	1024px〜	ノートPC
`xl:`	1280px〜	デスクトップ
`2xl:`	1536px〜	大画面

モバイルファースト

Tailwindはモバイルファーストです。プレフィックスなしのクラスがデフォルト（最小幅）で、プレフィックスを付けると「その幅以上のとき」適用されます。

<!-- スマホ: 1列、タブレット: 2列、PC: 3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  ...
</div>

html

画面幅で列数が変わるカード一覧

スマホ

1列で読みやすく表示

タブレット

md以上で2列に変更

lg以上で3列に拡張

この例では grid-cols-1 がすべての画面幅の基本になり、md:grid-cols-2 と lg:grid-cols-3 が上書きしていきます。レスポンシブは「スマホ用を別に作る」のではなく、小さい画面の自然な見た目をベースにして、大きい画面だけ拡張すると考えると安定します。

よく使うパターン

横並びを画面幅で切り替え

<!-- スマホは縦、PC以上は横 -->
<div class="flex flex-col md:flex-row gap-4">
  <aside class="w-full md:w-64">サイドバー</aside>
  <main class="flex-1">メイン</main>
</div>

html

テキストサイズ

<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  タイトル
</h1>

html

表示・非表示

<!-- スマホでは非表示、md以上で表示 -->
<nav class="hidden md:flex gap-4">...</nav>
 
<!-- スマホでは表示、md以上で非表示（ハンバーガーメニューアイコンなど） -->
<button class="md:hidden">メニュー</button>

html

padding

<section class="py-8 md:py-16 lg:py-24">
  ...
</section>

html

max- プレフィックス（上限指定）

v3.2以降、max-md: のように上限を指定できます。

<!-- md未満のときのみ適用 -->
<div class="max-md:hidden">タブレット以上で表示</div>

html

ちゃんと使うためのポイント

プレフィックスなし = スマートフォン向けがデフォルト
sm: / md: / lg: のどれか2〜3つを一貫して使えばほとんどのケースに対応できる
hidden md:block でスマートフォン非表示は頻出パターン

次の章では、ホバー・フォーカスなどの**状態修飾子**を学びます。

Tailwind CSSクイズに挑戦するこの章で学んだTailwind CSSの知識を、4択クイズでアウトプットして定着させよう