Padding and Margin

Fluid padding and margin utilities that scale continuously with the viewport or a container, in linear, exponential, and logarithmic variants.

Fluidity provides eighteen fluid spacing utilities across two groups: nine for padding and nine for margin. Each ships in all three curve variants (linear, exp-, log-) and works with any Tailwind variant.

Padding utilities

Control padding on all sides and individual edges:

Utility	CSS Property
`f6y-p`	`padding` (all sides)
`f6y-px`	`padding-inline`
`f6y-py`	`padding-block`
`f6y-ps`	`padding-inline-start`
`f6y-pe`	`padding-inline-end`
`f6y-pt`	`padding-top`
`f6y-pr`	`padding-right`
`f6y-pb`	`padding-bottom`
`f6y-pl`	`padding-left`

Margin utilities

Control margin on all sides and individual edges:

Utility	CSS Property
`f6y-m`	`margin` (all sides)
`f6y-mx`	`margin-inline`
`f6y-my`	`margin-block`
`f6y-ms`	`margin-inline-start`
`f6y-me`	`margin-inline-end`
`f6y-mt`	`margin-top`
`f6y-mr`	`margin-right`
`f6y-mb`	`margin-bottom`
`f6y-ml`	`margin-left`

Value forms

Both padding and margin utilities use the spacing value kind, which accepts spacing-scale numbers and arbitrary values:

Pair (both from scale): f6y-p-2/8 -> padding ramps from 0.5rem (spacing-2) to 2rem (spacing-8)
Arbitrary (both bracketed): f6y-p-[1rem]/[3rem] -> ramps from 1rem to 3rem
Mixed (scale and arbitrary): f6y-p-2/[3rem] -> ramps from 0.5rem to 3rem
Min only (no max): f6y-p-2 -> ramps from 0.5rem to 0.5rem * ratio (default 1rem, 2× multiplier)
Bare (value omitted): f6y-p -> ramps from the spacing default 1rem to 2rem (the default --spacing(4) through its 2× ratio)

The spacing scale maps numbers to lengths: 2 is 0.5rem, 4 is 1rem, 8 is 2rem, etc. Arbitrary values use CSS length units (rem, px, %, etc.) and can be percentages.

Live demo

Resize this container to see padding grow along the ramp:

Drag the corner to resize this container ->

f6y-p-2/8

<div class="@container">
  <div class="f6y-p-2/8 f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
    Padding ramps from 0.5rem to 2rem as this container grows
  </div>
</div>

Curves and variants

All eighteen utilities come in three curve variants: linear, exponential, and logarithmic. They differ only in how they transition between min and max:

f6y-p-2/8: linear progression
f6y-exp-p-2/8: exponential (slow start, fast finish)
f6y-log-p-2/8: logarithmic (fast start, slow finish)

See Curves for how each curve behaves.

Every padding and margin utility also works with any built-in Tailwind variant:

<div class="md:f6y-p-4/8"></div>           <!-- Only on medium screens and up -->
<div class="hover:f6y-m-2/6"></div>        <!-- On hover -->
<div class="dark:f6y-p-2/8"></div>         <!-- In dark mode -->
<div class="focus:f6y-pl-1/4"></div>       <!-- On focus -->

Variants stack and work as you’d expect with any other Tailwind utility.