Usage

Viewport-Based Fluid Scaling

Use the -fluid-[] modifier with supported properties to create smooth scaling between breakpoints. The plugin automatically calculates the scaling using CSS clamp().

<div className="pt-fluid-[sm=1,md=2,lg=4,xl=8]">
  {/* Padding-top scales smoothly between breakpoints */}
</div>

Syntax

The plugin provides fluid scaling utilities in the format: {property}-fluid-[breakpoints]

{property}-fluid-[breakpoint1=value1,breakpoint2=value2,...]
{property}-fluid-[value1,value2]

Value Types

Values can be Tailwind theme spacing values, explicit pixel dimensions, or rem units:

<div className="mb-fluid-[4,6]"/>

<div className="mb-fluid-[10px,23px]"/>

<div className="mb-fluid-[3rem,6rem]"/>

Fluid Scale Clamping

Fluid scaling is always clamped to the clamp min and clamp max beakpoints defined in the @theme section.

This means that values may scale past the values supplied in the given parameters.

<div className="w-fluid-[sm=40px,lg=60px]"/>

In the example above, the width will scale between 40px at sm and 60px at lg. It will use the slope calculated by these values to continue to scale down to the clamp min and up to the clamp max viewport sizes.

Note: There is an exception to this - if using @container queries, the fluid scaling will not be clamped.

Supported Properties

The plugin supports a wide range of Tailwind properties for fluid scaling:

• Layout: inset, top, right, bottom, left
• Flexbox and Grid: gap, gap-x, gap-y
• Sizing: w, h, size, max-w, max-h, min-w, min-h
• Spacing: p, pt, pr, pb, pl, px, py, m, mt, mr, mb, ml, mx, my, space-x, space-y
• Typography: text, leading, tracking

For container and screen size references, see the Tailwind CSS documentation.

How It Works

The plugin calculates fluid values using CSS clamp() to create smooth transitions between breakpoints. For example, if you use:

<div className="mt-fluid-[sm=1,lg=4]"></div>

The plugin will:

• Convert the values to pixels
• Calculate the appropriate scaling ratio
• Generate a CSS clamp function that smoothly transitions between the values
• Apply the fluid scaling at the specified breakpoints

Example

In the example below, we have three boxes:

• The pink box which represents the static value
• The blue border box which represents the full range of values (from clamp-min to clamp-max) in which the green filled box will move from/to on resize
• The green border box which represents the range of values (from the breakpoints used in the parameters) in which the green filled box will move from/to on resize
• The green filled box which is the current fluid value

In the design-min viewport size (--breakpoint-design-min: 320px;) the green filled box will move to the top of the green border box at 24px. In the design-max viewport size (--breakpoint-design-max: 1320px;) the green filled box will move to the bottom of the green border box at 44px. In the clamp-max viewport size (--breakpoint-clamp-max: 1680px;) the green filled box will move to the bottom of the blue border box at a value larger than 44px (scaled at the same rate)..

<div className="relative">
  <div className="absolute top-fluid-[24px,44px] ..." />
</div>

Browser Support

This plugin uses CSS clamp() which is supported in all modern browsers. For browser compatibility details, check Can I Use.