Tailwind CSS Fluid Scaling Plugin
A Tailwind CSS plugin that enables fluid scaling using CSS clamp().
Instead of jumping between breakpoints, your spacing, typography, and dimensions scale smoothly across viewport sizes—creating more natural, responsive layouts. Use the -fluid-[] modifier with any supported property. Works with Tailwind's theme values, pixels, and rem units.
Fluid Scaling Examples
Width Scaling
In the example below, we have a width that scales smoothly between the minimum and maximum viewport sizes, showcasing the fluid scaling of the width's elements.
Text Scaling
In the example below, we have a text that scales smoothly between the minimum and maximum viewport sizes, showcasing the fluid scaling of the text's elements.
Geometrical Shapes Scaling
In the example below, we have a geometrical shapes that scales smoothly between the minimum and maximum viewport sizes, showcasing the fluid scaling of the width and height of the shapes.
Card Scaling
In the example below, we have a card that scales smoothly between the minimum and maximum viewport sizes, showcasing the fluid scaling of the card's elements.
Grid Scaling
In the example below, we see the gap and the number of columns of the grid smoothly changing between the minimum and maximum viewport sizes.
Next Steps
Get started by installing the plugin or check out the usage guide to learn how to use fluid scaling utilities.
© Gladeye 2026