Tailwind CSSでは、レスポンシブ対応をブレイクポイントの接頭辞で行います。flex-col のような接頭辞なしのクラスは全サイズに適用され、md:flex-row のような接頭辞付きのクラスは md ブレイクポイント（48rem、768px）以上で適用されます。そのため、Tailwindはデフォルトでモバイルファーストです。スマホのレイアウトは接頭辞なしで書き、大きな画面向けに接頭辞を足していきます。この記事はTailwind v4を対象とし、構文が異なる箇所にはv3の補足を入れています。
Tailwind CSS v4のデフォルトのブレイクポイント
| 接頭辞 | 最小幅 | ピクセル換算（ルート16px） | 生成されるCSS |
|---|---|---|---|
sm: |
40rem | 640px | @media (width >= 40rem) |
md: |
48rem | 768px | @media (width >= 48rem) |
lg: |
64rem | 1024px | @media (width >= 64rem) |
xl: |
80rem | 1280px | @media (width >= 80rem) |
2xl: |
96rem | 1536px | @media (width >= 96rem) |
デフォルトでは xs: という接頭辞はありません。接頭辞なしのスタイルが最小のレイアウトになります。値はTailwindのレスポンシブデザインのドキュメントで確認できます。
モバイルファーストの接頭辞の考え方
よくあるカードのレイアウトです。
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
...
</div>左から右へ読みます。スマホでは1カラム、640px以上で2カラム、1024px以上で3カラムになり余白も広がります。よくある間違いは、スマホ向けのつもりで sm:grid-cols-1 と書くことです。sm: は「640px以上」という意味なので、スマホ用のスタイルは接頭辞なしで書きます。
縦並びから横並びに変わるヘッダーの例です。
<header class="flex flex-col items-start gap-3 md:flex-row md:items-center md:justify-between">範囲や最大幅を指定する
Tailwind v4には max-* バリアントがあり、min-widthの接頭辞と組み合わせられます。
max-md:hiddenは768px未満で要素を非表示にします。md:max-lg:flexは768px以上1024px未満でだけ適用されます。
一度きりの値には任意のブレイクポイントを使います：min-[900px]:grid-cols-4、max-[420px]:text-sm。多用は避け、同じ値が何か所にも出てくるなら名前付きのブレイクポイントにしましょう。
ブレイクポイントの追加と変更
v4では、ブレイクポイントはCSS内で定義するテーマ変数です。
@import "tailwindcss";
@theme {
--breakpoint-xs: 30rem;
--breakpoint-3xl: 120rem;
}これで xs: と 3xl: の接頭辞が使えるようになります。既存のものを変えるには再定義し（--breakpoint-md: 50rem;）、デフォルトのものを削除するには initial を指定します。
Tailwind v3では、同じ設定を tailwind.config.js の theme.screens（デフォルトを残すなら theme.extend.screens）に書きます。
ブラウザの標準文字サイズを変えているユーザーにも対応できるよう、remで指定しましょう。幅そのものの決め方はレスポンシブのブレイクポイントで解説しています。
自作のCSSでメディアクエリを書く
コンポーネントによってはCSSで書いたほうが楽な場合もあります。v4では、そこでもTailwindのブレイクポイントを再利用できます。
.prose-table {
overflow-x: auto;
@variant md {
overflow-x: visible;
}
}@variant にはクラス名と同じバリアント名を指定できるので、@variant lg や @variant dark も同じように使えます。メディアクエリの一般的な書き方はCSSメディアクエリの書き方をご覧ください。
知っておきたいその他のレスポンシブ用バリアント
portrait:とlandscape:：画面の向き。dark:：ダークモード（クラス方式を設定しない限りprefers-color-schemeに基づく）。motion-reduce:とmotion-safe:：視差効果を減らす設定。print:：印刷用スタイル。- v4の
hover:はホバーに対応した端末でのみ適用されるため、タッチ画面でタップしたあとにホバー効果が「残ったまま」になることがなくなりました。
Tailwindのコンテナクエリ
ブレイクポイントは表示領域に反応します。コンテナクエリは親要素の幅に反応するので、広いカラムにも狭いカラムにも置かれる再利用コンポーネントに向いています。v4では標準機能です。
<div class="@container">
<article class="flex flex-col @md:flex-row">...</article>
</div>ここでの @md: は画面ではなくコンテナの幅（デフォルトで28rem）を指します。v3では公式プラグイン @tailwindcss/container-queries が必要です。
Tailwindのレイアウトをスマホでテストする方法
Tailwindではブレイクポイントを簡単に追加できますが、確認を忘れるのも簡単です。作業中は次のようにしましょう。
- エディタの横にスマホサイズの表示を開いておく。Chrome DevToolsのデバイスモードでもよいですし、ワンクリックで切り替えられ、localhostでも動き、ページを移動してもスマホの枠を保つ Mobile View Extension も使えます。
- DevToolsのデバイスツールバーで Show media queries をオンにし、Tailwindのブレイクポイントをバーで表示して各幅に切り替える。
- 各ブレイクポイントを、ちょうどの幅と1px狭い幅でテストする。たとえば767pxと768pxです。
テスト手順の全体はレスポンシブデザインのテスト方法にまとめています。
よくある質問
Tailwind CSSのブレイクポイントは？
デフォルトでは、sm 40rem（640px）、md 48rem（768px）、lg 64rem（1024px）、xl 80rem（1280px）、2xl 96rem（1536px）です。それぞれその幅以上で適用されます。
Tailwindでスマホだけにスタイルを当てるには？
スマホ用のスタイルを接頭辞なしで書き、大きなサイズで上書きします。ある幅未満だけに適用したい場合は、max-sm: や max-md: のような max-* バリアントを使います。
Tailwindのメディアクエリはmin-widthとmax-widthのどちらですか？
min-widthです。デフォルトのブレイクポイントの接頭辞はどれもその幅以上で適用され、これがモバイルファーストの考え方です。