❓ CSS clamp() と流体タイポグラフィに関するFAQ
Q. なぜメディアクエリ（@media）を何個も書くより clamp() が優れているのですか？
従来のメディアクエリによる段階的な文字サイズ変更では、画面幅のブレークポイントを跨いだ瞬間にカクッと文字サイズが跳ね上がったり、タブレットや大画面スマホなどの中間画面で不格好な改行が発生していました。clamp()を用いることで、375pxから1280pxまでのすべての画面幅で1px単位で滑らかに比率が補間され、常に美しく統一感のあるデザインが実現できます。
Q. 負のy切片（マイナス値）が出ることがありますが、文法的に正しいですか？
はい、完全に正常です。傾き（vw係数）が急な場合、一次関数の直線がx=0（画面幅0px）と交わるy切片がマイナス値になることがあります。CSS clamp()内部では「0.5rem - 1.2vw」または「calc(-0.2rem + 2.5vw)」のような形式でもブラウザのCSSエンジンが正確に計算して描画します。
Q. Tailwind CSS で clamp() を使うにはどうすればよいですか？
Tailwind CSS では任意の値構文（Arbitrary values）として text-[clamp(1rem,2vw+0.5rem,2rem)] のようにクラス名に直接埋め込むか、tailwind.config.js の theme.extend.fontSize に登録して text-fluid-h1 のようなカスタムユーティリティクラスとして呼び出すのが一般的です。本ツールではその両方のコードをワンクリックで出力できます。