背景
Tailwindに限らず、Bootstrapとかもそうですが、いまだにレスポンシブデザインのためのmdとかxlとかのprefixが理解できないため、理解するためのメモです
本編
| Breakpoint prefix | Minimum width | CSS |
|---|---|---|
| sm | 640px | @media (min-width: 640px) { ... } |
| md | 768px | @media (min-width: 768px) { ... } |
| lg | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
| 2xl | 1536px | @media (min-width: 1536px) { ... } |
まずは定義です
Tailwindでは、各prefixがあらわすbreakpointは上記のようになっています
そして、おさらいです
@media (min-width: 640px) {
background-color: red;
}
上記の意味は、『640px以上ならば背景色がredになる』です
これを踏まえて、Tailwindのprefixを考えます
<div class="sm:bg-red-500"></div>
とあったときは、
@media (min-width: 640px) {
background-color: /* bg-red-500 */;
}
ということで、『640px以上ならば背景色が/* bg-red-500 */になる』となります
わたしは、sm、md、lg等をサイズ名と考えてしまうため、混乱しているのだと思います
正しくは、smは640px以上、mdは768px以上、lgは1024px以上と考えないとなりません
これがなかなか覚えられません
たとえば、以下のような場合は
<span class="sm:invisible">hello world</span>
『（不要なので指定していませんが）デフォルトが表示だけど、640px以上で非表示になる』で、
つまり、0～639pxで表示、640px以上で非表示ですね、だよね
次に、
<span class="invisible sm:visible md:invisible">hello world</span>
こうだと、『デフォルトは非表示状態だけど、640px以上で表示され、768px以上で非表示になる』ですから、0～639pxで非表示、640px～767pxで表示、768px以上で非表示ですね
ちょっとわかってきました
ここでTailwindのResponsive Designのページを読んでいたら、以下の項目を見つけました
By default, Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.
デフォルトでは、Tailwindはモバイルファーストのbreakpointシステムを採用している、Bootstrapのような他のフレームワークでそうだったかもしれないのに似ていて――のようなことが書かれていました
『モバイルファースト』は、まったく知りませんが、スマホ等の小さいディスプレイの表示から実装していくとか考えていくとかデザインしていくとか、みたいなことだったような……
<div class="text-center sm:text-left"></div>
ですから、上の例のように、
『デフォルトでは』つまり『モバイル端末では』『文字列は中央揃え』と決めてから、『640px以上のディスプレイでは』『文字列は左揃え』と指定していくのでしょうか
Use unprefixed utilities to target mobile, and override them at larger breakpoints
この文のoverrideをイメージしておくと、理解しやすいかも
メディアクエリにはrangeという概念もあるようなので、それについての書き方も書かれていました
<!-- mdブレークポイントから、xlブレークポイントまでflex -->
<div class="md:max-xl:flex"></div>
<!-- mdブレークポイントから、lgブレークポイントまでflex -->
<!-- mdの次がlgのため、つまり、一段階の間だけflexを適用するということ -->
<div class="md:max-lg:flex"></div>
こちらのほうがわかりやすいような、わかりにくいような……
後書き
多少理解が深まりました
具体的な実装方法の手順も書かれていたので、マニュアルはちゃんと読むべきだなと思いました