2024年02月28日(水)

ユーティリティでclamp()を簡単に生成できるようにするTailwindプラグイン・「Fluid for Tailwind CSS」

• 0
• 8
• 2
• 1

Fluid for Tailwind CSS

Fluid for Tailwind CSSはユーティリティでclamp()を簡単に生成できるようにするTailwindプラグインです。コードの記述量を減らし、より見栄えのいいRWDの対応をサポートします。

プリフィックスとして「~」が追加され、開始値と終了値は「/」で区切って指定、開始点と終了点はデフォルトで最小画面と最大画面に設定、ただしユーティリティごとにカスタマイズまたは上書きできるそうです。また、プリフィックスと区切りの記号はカスタマイズ可能となっていますのでコンフリクトの回避も問題なく行えます。

例えば.~text-lg/2xlというclassには以下のコードが生成されます。

.\~text-lg...