Fluid for Tailwind CSS
Fluid for Tailwind CSSはユーティリティでclamp()を簡単に生成できるようにするTailwindプラグインです。コードの記述量を減らし、より見栄えのいいRWDの対応をサポートします。
プリフィックスとして「~」が追加され、開始値と終了値は「/」で区切って指定、開始点と終了点はデフォルトで最小画面と最大画面に設定、ただしユーティリティごとにカスタマイズまたは上書きできるそうです。また、プリフィックスと区切りの記号はカスタマイズ可能となっていますのでコンフリクトの回避も問題なく行えます。
例えば.~text-lg/2xlというclassには以下のコードが生成されます。
.\~text-lg\/2xl {
font-size: clamp(1.125rem, 0.9rem + 0.75vw, 1.5rem);
line-height: clamp(1.75rem, 1.6rem + 0.5vw, 2rem)
}Tailwindでclamp()を効率的に使いたい、とお考えだった方はご覧になってみては如何でしょうか。導入フローや、他の使い方などは以下プロジェクトサイトおよびドキュメントをご参照ください。