Tailwind の任意値でフルードなサイズを
Tailwind では、角かっこの中に任意の CSS の値を書けます。スペースはクラスの区切りになるため、値の中のスペースはアンダースコアで書き、CSS を生成するときに Tailwind がスペースに戻します。ツールはこれを自動で処理し、text-[clamp(1rem,0.8333rem_+_0.8333vw,1.5rem)] のようなクラスを出力します。プラス記号の前後のアンダースコアは重要です。CSS では数学関数の中の + と − の前後に空白が必要だからです。
テーマに登録する
任意値のクラスは、1 か所だけの見出しに最適です。同じサイズを何か所でも使うなら、テーマに移しましょう。Tailwind v4 では、@theme ブロックに --text-fluid-lg: clamp(…) のような変数を追加すれば、どこでも text-fluid-lg が使えます。Tailwind v3 では、tailwind.config.js の theme.extend.fontSize に値を追加します。
フルードなサイズをテーマにまとめておけば、信頼できる情報源が 1 つになります。デザインが変わっても 1 行を直すだけで、すべてのコンポーネントに反映されます。
余白のユーティリティ
同じ出力は余白にも使えます。ツールを余白モードに切り替えると p-[clamp(…)] が出力されるので、必要に応じて px-、py-、m-、gap-、space-y- に書き換えてください。フルードな余白とフルードな文字を組み合わせれば、ほとんどのページでサイズのためのレスポンシブ接頭辞が不要になります。
よくあるつまずき
text-[…] クラスが効かない場合は、値に通常のスペースが含まれていないか、また Tailwind がソースファイル内でクラス名全体を検出できるかを確認してください。文字列の連結で組み立てたクラス名は検出されません。Tailwind が値を色として解釈してしまう場合は、text-[length:clamp(…)] と書いて型を明示しましょう。