余白をフルードにする理由
たっぷりとした余白はデスクトップのレイアウトに落ち着きを与えますが、同じ 96px のセクション padding はスマートフォンの画面の 3 分の 1 を無駄にします。固定のブレークポイントでは段階的にしか調整できず、タブレットでは余白が詰まりすぎたり空きすぎたりしがちです。フルードな値は連続的に変化するので、どの画面にも幅に応じた余白が割り当てられ、宣言も 3 つではなく 1 つで済みます。
フルードな文字と同じ計算式
余白にもフォントサイズとまったく同じ一次式を使います。最小値、最大値、そして 2 つのビューポート幅を結ぶ直線です。違うのは選ぶ数値だけです。余白は可読性を保つ必要がないため、文字よりも大きな倍率で増やすことがよくあります。セクションの padding を 24px から 64px にするのは一般的です。WCAG の 2.5 倍のズーム警告は余白には当てはまりませんが、値を文字に流用する場合に備えて注意として表示されます。
スペーシングスケールを作る
一貫したシステムにするには、--space-s、--space-m、--space-l のようなフルードな余白トークンをいくつか定義し、それぞれに最小値と最大値を設定します。小さいものはコンポーネント内の隙間に、中くらいのものはカードの padding に、大きいものはページのセクション間に使います。同じビューポート範囲のフルードなタイプスケールと組み合わせれば、文字と余白が足並みをそろえて大きくなります。
Tailwind では、p-[clamp(…)]、gap-[clamp(…)]、my-[clamp(…)] のような任意値として適用します。ツールはスペースの代わりにアンダースコアを使ったクラスをそのまま出力します。これが、Tailwind が任意値の中のスペースを表す書き方です。
ヒント
余白も rem で指定し、文字と一緒にユーザーのフォント設定を尊重しましょう。枠線や細い罫線にはフルードな値を使わないでください。小数点以下のピクセルでにじむことがあります。320px でプレビューを確認し、padding がコンテンツの領域を圧迫していないか確かめましょう。