はじめに
こんにちは、Gakken LEAPのフロントエンドエンジニアの Okuma です。
先日tailwindcssについて調べている際に、偶然「fluid-tailwind」というライブラリを発見しました。
公式サイトを覗いてみると、どうやらtailwindcssと同じような記法でレスポンシブへのスタイルの変更がスムーズになるというもので、概要だけ確認してすぐに触ってみたいと思いました！
今回はそんなfluid-tailwindについての簡単な解説と、実際に触ってみた感想やtailwindcssとの違いなどをご紹介できればと思います。
fluid-tailwindとは
公式サイトの概要には「Scale utilities smoothly between breakpoints with CSS clamp().」（CSS Clamp を使用してブレークポイント間でユーティリティをスムーズにスケーリングする）と書かれています。
どうやらtailwindcssのスケールに関するユーティリティクラス（widthやheight、font-sizeなど）をCSS Clampを使って画面サイズに合わせて変更しているようです。
CSS Clampについて
ここでCSS Clampについて復習してみましょう。
clamp関数はある要素のサイズを動的に調整することができる便利なCSS関数です。clamp関数を使用することによって、特定の要素がある最小値より小さくならないようにしつつ、ある最大値を超えないように制限することができます。そして、これらの最小値と最大値の間で要素のサイズが柔軟に変化します。
clamp関数の基本形には取りうる引数の順番があり、clamp(最小値、優先値、最大値)となります。
- 最小値：要素が取り得る最小のサイズを指定する
- 優先値：要素のサイズとして理想的だと思われる値で、この値はビューポートのサイズなどに応じて調整される
- 最大値：要素が取り得る最大のサイズを指定する
.clamp_test {
width: clamp(100px, 60vw, 800px);
}
例えば、上記のコードでは要素の最小値が100px、最大値が800pxになるように指定しています。ここではビューポート（表示領域）の幅によって変化する優先値を60vwとしているので、基本的に画面サイズの60vwで表示されますが、それでも最小値と最大値の範囲内に収まるように制限されます。
通常のTailwindCSSで実装
今回は通常のTailwindCSSとレスポンシブの動きや見た目にどのような違いがあるかを比較したかったため、まずは通常のTailwindCSSのみを使用してカードタイプのレイアウトを作成しました。
TailwindCSSのブレイクポイントで、sm（640px）以下になった場合にカードの画像サイズやpaddingなどのスペース、フォントサイズなどが小さくなるようにスタイリングしました。
よろしければウィンドウサイズを変更してみてください。
一定のサイズを下回るとカードが全体的に小さくなるのが確認できます！
fluid-tailwindを使用した実装
先ほど作成したカードを今度はfluid-tailwindを使ってレスポンシブの実装を行なっていきます。
記法としては特に難しいものではなく、一般的なTaliwndCSSのブレイクポイントの書き方やサイズ指定の書き方が理解できていれば問題はありません。
fluid-tailwindのPlaygroundで実装してみたので、このページ内でプレビューができなくて申し訳ないのですが、よろしければ以下のリンクを開いてご覧ください。その際にプレビューのウィンドウサイズを変更してみてカードのUIがどのように変化するか注目していただければと思います。
先ほどのTailwindCSSのみを使って実装と比べて、ある一定のウィンドウサイズからいきなりpaddingやフォントサイズが小さくなるのではなく、ウィンドウサイズに合わせて徐々に縮小していくのがわかります。
これがまさにCSS Clampを使ってスタイリングされている証拠で、最大値と最小値の間で値が変化することでウィンドウサイズによるスムーズなレスポンシブの実装が行えるのです。
fluid-tailwindのユーティリティクラスについて
設定やクラスについての詳細は公式ドキュメントに記載されていますので、ここでは簡単にどのようにユーティリティクラスを記述するかについて簡単に触れたいと思います。
<div class="p-6 md:p-8 lg:p-10"></div>
このようなクラスを設定した場合、TailwindCSSの解釈では「ウィンドウサイズがlp（1024px）以上の場合はpaddingが40px、md（768px）以上の場合はpaddingが32px、それ未満の場合は24px」というスタイリングになります。
これをfluid-tailwindのルールに則って記述すると以下になります。
<div class="~p-6/10"></div>
チルダ（~）を先頭に付与してプロパティ名を続け、最小値と最大値をスラッシュ（/）で挟んで記述します。この記述によってpaddingの値がウィンドウサイズによって24px〜40pxの間で設定されることになります。
フォントサイズの例についても見てみましょう。
<div class="~/text-base/2xl"></div>
この場合はフォントサイズがbaseから2xl、つまり16px〜24pxの間で可変になります。
このようにfluid-tailwindのクラスはTailwindCSSのユーティリティクラスを流用しているため、TailwindCSSのクラスを理解している人にとってはすぐに使えるものになっています。
感想・まとめ
今回はfluid-tailwindというTailwindCSSから派生したライブラリについて簡単に紹介させていただきました。
もちろんTailwindCSSのブレイクポイントを使ったレスポンシブでも全く問題はありませんが、こういった派生ライブラリで一味違ったスタイリングの実装も面白いですね。
ウィンドウサイズを変更しながらWebサイトを閲覧するようなことはあまりなく、デスクトップやモバイルで開いた時にちゃんと表示されていれば問題ありませんが、フロントエンドエンジニアとしてはどのようなウィンドウサイズでも綺麗に表示されているのはこだわりの一つとして持っていたりもするので、今回のようなライブラリはできれば積極的に使っていきたいところです。
エンジニア募集中
Gakken LEAP では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！
ぜひお気軽にカジュアル面談へお越しください！！