tailwindcss のブレイクポイントについて
2026/08/06
Tailwind CSS は**モバイルファースト（Mobile-First）**の設計思想を採用したユーティリティファーストのCSSフレームワーク。
ブレイクポイントプレフィックスを使用することで、HTMLのクラス名だけでレスポンシブデザインを簡単に構築できるけど、そう、上述の通りモバイルファーストの思想である点がポイント...
1. デフォルトのブレイクポイント一覧
Tailwind CSS（v4スタイル表記）におけるデフォルトのブレイクポイント設定は以下の通り。
ここを覚えておくと便利だと思うけど、この時代そんなこと言ってるのはいつまでか。あるいはもうそんな時代ではないか...
| プレフィックス | 最小幅（rem） | 最小幅（px換算） | 生成される 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) |
2. 基本的な使い方
Tailwind のレスポンシブ指定は ブレイクポイント:クラス名 の形式で記述します。
各プレフィックスは**「その画面幅以上になったとき」**にスタイルを適用（min-width 動作）します。
この辺りがスマホのない時代に育った時代遅れな私のような存在にとって、意外と引っかかるところ...
コード例：グリッドと横幅の切り替え
<div class="w-full bg-slate-100 md:w-1/2 lg:w-1/3">
<!--
- スマホ（~767px）: 幅 100% (w-full)
- タブレット（768px~1023px）: 幅 50% (md:w-1/2)
- PC（1024px~）: 幅 33.3% (lg:w-1/3)
-->
</div>
詳細は公式ガイドでどうぞ。