画面幅で切りかえる（md:とlg:）

Tailwindのレスポンシブは、クラスの前に接頭辞を付けるだけです。メディアクエリを1行も書きません。

<!-- スマホでは縦積み、768px以上で横並び -->
<div class="flex flex-col md:flex-row gap-4">
  <div>1</div>
  <div>2</div>
</div>

md:flex-rowが「768px以上のときだけflex-direction: row」という意味です。素のCSSに戻すとこうなります。

.box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .box {
    flex-direction: row;
  }
}

同じことを、HTMLの1行で書いているわけです。

5つの接頭辞

Tailwindが最初から用意している区切りは5つです。

実務でよく使うのはmd:とlg:の2つです。「タブレットから2列、PCから3列」のような指定は、この2つで足ります。

<!-- スマホ1列 → タブレット2列 → PC3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="p-4 bg-white rounded-xl">1</div>
  <div class="p-4 bg-white rounded-xl">2</div>
  <div class="p-4 bg-white rounded-xl">3</div>
</div>

左から右へ、狭い画面から広い画面の順に読む——これがTailwindのレスポンシブの読み方です。

接頭辞は必ず「この幅以上」

ここがTailwindのいちばん大きな設計判断です。接頭辞はすべてmin-width、つまり「この幅以上のとき」しかありません。

その結果、書き方が1つに決まります。

• 接頭辞なし＝スマホの見た目（土台）
• 接頭辞つき＝広い画面で上書き

つまりモバイルファーストが強制されるわけです。「max-widthで書こうかな」と迷う余地がありません。

表示・非表示の切りかえ

「スマホではハンバーガーメニュー、PCでは横並びのメニュー」という定番も、接頭辞だけで書けます。

<!-- スマホだけ出るボタン -->
<button class="md:hidden">メニュー</button>

<!-- PCだけ出るナビ -->
<nav class="hidden md:flex gap-4">
  <a href="#">ホーム</a>
  <a href="#">について</a>
</nav>

読み方はこうです。

• md:hidden——ふだんは表示、768px以上で非表示
• hidden md:flex——ふだんは非表示、768px以上でdisplay: flex

hiddenがdisplay: noneにあたります。md:blockではなくmd:flexにしているのは、そのナビを横並びにしたいからです。「何で表示するか」まで指定できるのがこの書き方の便利なところです。

文字サイズと余白も切りかえる

見出しの大きさは、スマホとPCで同じだと必ずどちらかが不自然になります。

<h1 class="text-2xl md:text-4xl font-bold">
  しまちゃんのページ
</h1>

スマホで24px、768px以上で36px。余白も同じ形で切りかえられます。

<section class="px-4 py-8 md:px-8 md:py-16">
  ...
</section>

よく使う組み合わせ4つ

スマホ縦積み → PC横並び

<div class="flex flex-col md:flex-row gap-4">

カード一覧の列数を増やす

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

スマホでは全幅、PCでは固定幅のサイドバー

<aside class="w-full md:w-60 md:shrink-0">

中身の幅を制限（どの幅でも中央）

<div class="max-w-4xl mx-auto px-4 md:px-8">

いちばん下のものは接頭辞がpaddingにしか付いていません。max-w-4xl mx-autoは全幅で有効で、画面が狭いときは自動的に縮むので切りかえが不要です。そもそも切りかえずに済む書き方を優先するのは、素のCSSと同じ考え方です。

クラスが長くなってきたときの整理

接頭辞が増えると、クラス列がかなり長くなります。読みやすく保つコツは並べる順番を決めることです。

<!-- おすすめ：狭い画面 → 広い画面の順にまとめる -->
<div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 md:gap-6 md:p-8 lg:grid-cols-3">

接頭辞なしを先に全部、次にmd:を全部、最後にlg:。この順にそろえるだけで、ぐっと読めるようになります。並べ替えを自動でやってくれる整形の道具もありますが、まずは手で意識するだけで十分です。

このレッスンのまとめ

1. クラスの前にmd:を付けるだけで「この幅以上のとき」になる
2. 接頭辞はすべてmin-width——だからモバイルファーストが強制される
3. 接頭辞なし＝スマホ、接頭辞つき＝広い画面。左から右へ、狭いから広いの順に読む
4. md:を「スマホ用」と勘違いすると表示・非表示が逆になる
5. よく使うのはmd:とlg:の2つ。切りかえずに済む書き方があればそちらを優先

次は、hover:やfocus:といった状態に反応させる接頭辞を見ていきます。仕組みはmd:とまったく同じです。