Tailwind CSSはある程度既存のクラスが用意されていて、ブレイクポイントについても同様。
ただ、カラー名などでもそうだけど、任意のサイズや色などを用意したいことの方が多い。
また、基本はデフォルトのもので良いけど、このコンポーネントだけは変えたい、とか、この場所だけ横幅の兼ね合いでフォントサイズも変えたい、とか出てくる。
そんな時に便利な方法。
デフォルトのブレイクポイント
Taildwind CSSではデフォルトで以下のサイズが準備されている。
- ‘sm’: ‘640px’
- ‘md’: ‘768px’
- ‘lg’: ‘1024px’
- ‘xl’: ‘1280px’
- ‘2xl’: ‘1536px’
この数値についてはtailwind.config.tsに設定を入れることで、任意の数値にすることができる。
また、何度も使うのならば、smの下にxsを作ったり、2xlの上に3xlを作ったり、なども自由に設定できる。
サイトの横幅サイズとして、各種決まりごとがあるのならば、それに合わせてTailwind CSSに設定すれば良いのが、Tailwind CSSの良いところ。
都度変える方法
何度も使うものではなく、ピンポイントで一回だけ使いたいという時に便利なのが、以下の書き方。
min-[474px]:text-[11px]
これでブレイクポイントとして機能する。
とても便利な書き方だけど、数値の設定を適当にすると、管理が大変になる。
ある場所では350pxで、別の場所では345pxで、他の場所では…、なんてことになると、メンテナンスがとても大変。Tailwind CSSにて、jitモードがデフォルトになってからは自由度が高いので、ルール付けをしないとこういうことが起きやすくなった気がする。
ルールを決めて使えばとても便利なので覚えておくと良い。
