Closed2

memo @240228*

nakamotonakamoto

https://fluid.tw/
clamp()関数を使ったらメディアクエリを使ってCSSをこまめに設定せずとも画面幅に応じ文字サイズもボタンサイズも小さくなる。~px-4/8ならpx-4からpx-8迄対応してるということ。

<button class="bg-sky-500 ~px-4/8 ~py-2/4 ~text-sm/xl ...">Fluid button</button>

大抵のコンポーネントライブラリはその考え方に則ってスタイルが適用されてない。
Container queries x fluidはトレンドになりそうなのに。。
流行ってくれたらレスポンシブスタイルを一切気にしなくても良くなる。
Container queriesによってコンポーネントをどこに配置しても親要素の高さを勝手に計算し
fluidによって中間地点も表現できる。

このスクラップは2024/02/28にクローズされました