Tailwind におけるレスポンシブ
Tailwind 基本的にとてもいいんだけど、Utility class にはレスポンシブに特有のダルさがあるなーと思ったので言語化しておく。
@media クエリは if 文のようなもので、条件に当てはまる処理を塊で扱える
code:css
@media(width < 600px) {
...
}
一方 Tailwind の variant つきクラスは、オブジェクトの値を個別に三項演算子で書くような体験に近い
code:javascript
{
background: sm ? 'red' : 'blue', // sm:bg-red bg-blue
padding: sm ? 24 : 40, // sm:p-24 p-40
margin: sm ? 8 : 16, // sm:m-8 m-16
}
メンタルモデルとして「この幅のときの見た目」を塊で捉えているとこれが煩雑に感じられるケースがある。
しかしレスポンシブだけ全部 @apply で書きたいかというとそうはならんので……
Tailwind でこれを叶えようと思うと、コンポーネント側で画面幅による分岐を持ち込むしかない。
code:typescript
const { isSm } = useWindowSize()
しかしこれをやるとコンポーネントが window に依存してしまい、universal ではなくなる。クライアントサイドでは動くが SSR や SSG には一切使えないコンポーネントができてしまう(それで困らないケースもあるが)