🐡
[2023年5月版]tailwindのScreenは小さいほうが起点
tailwindcss のレスポンシブデザイン=設計方針を読み解く
以下の公式ドキュメントを参照します。
デフォルトで設定されているブレークポイントの一覧は以下
| ブレークポイントのプレフィックス | 最小幅 | CSS |
|---|---|---|
| sm | 640ピクセル | @media (min-width: 640px) { ... } |
| md | 768ピクセル | @media (min-width: 768px) { ... } |
| lg | 1024ピクセル | @media (min-width: 1024px) { ... } |
| xl | 1280ピクセル | @media (min-width: 1280px) { ... } |
| 2xl | 1536ピクセル | @media (min-width: 1536px) { ... } |
CSSのメディクエリでmin-widthが設定されている通り、ブレークポイントは指定されたサイズを超えたら発動するように仕掛けられる。
これをモバイルファーストと呼んだりもするけど、レスポンシブを考えるときは小さいほうを起点として画面が広がっていくごとに要素をどうするか考える、というのがtailwindの設計思想である。
ドキュメントにもはっきりと書いてある。
Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version.
ここでも"小さい画面に対してsm:プレフィックスをつけないのが驚かれる"と書いてあるけど、レスポンシブデザインはモバイルファーストでやる、というのがtailwindの思想である、ということですね。
Discussion