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]"/>

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 green border box which represents the values in which the green filled box will move from/to on resize
• The green filled box which is the current fluid value

In the minimum viewport size (--breakpoint-design-min: 320px;) the green filled box will move to the top of the green border box at 24px. In the maximum viewport size (--breakpoint-design-max: 1320px;) the green filled box will move to the bottom of the green border box at 44px.

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

Browser Support

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