📱
【TailwindCSS】ブレイクポイントまとめ｜各prefixの対応デバイスは？
TailwindCSSでブレイクポイントを考える上で、対応するデバイスがわからなくなることがよくあるのでまとめました。
TailwindCSSブレイクポイント早見表
| prefix | 画面サイズ | デバイス参考 |
|---|---|---|
| default | 〜639px | スマートフォン（縦向き） |
sm: |
640px〜 | スマートフォン（ヨコ向き） 小型タブレット（縦向き） |
md: |
768px〜 | タブレット（縦向き） |
lg: |
1024px〜 | タブレット（ヨコ向き） 小型ノートPC |
xl: |
1280px〜 | ノートPC、一般的なデスクトップ |
2xl: |
1536px〜 | 大型デスクトップモニター |
日本国内のデバイス利用割合（2025年4月時点）
| デバイス | 利用割合（日本） |
|---|---|
| スマートフォン | 約47.8% |
| デスクトップPC | 約49.8% |
| タブレット | 約2.4% |
Discussion