レスポンシブデザイン — ブレークポイントモディファイア - 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>

よく使うパターン

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

<!-- スマホは縦、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>

テキストサイズ

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

表示・非表示

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

padding

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

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

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

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

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

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

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