Utilities
Fluid type and spacing
Text sizes, padding, margin and gaps that scale smoothly with the viewport through clamp(), so one class covers phones and wide screens without breakpoints.
44classes
14variant classes
6properties
Live example
<div class="rounded-2xl border bg-surface p-fluid-md space-y-3">
<p class="text-fluid-3xl font-extrabold tracking-tight">Fluid headline</p>
<p class="text-fluid-base text-muted-foreground">Resize the preview: the headline, the text and the padding grow and shrink with the width, with no breakpoint classes at all.</p>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example rtl:px-fluid-xs. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | not generated | 0 |
| Group and peer | not generated | 0 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | rtl:ltr: | 7 |
Font size 9
Variants: none
| Class | CSS |
|---|---|
text-fluid-sm | font-size: clamp(0.8125rem, 0.788rem + 0.1087vw, 0.875rem); line-height: 1.5; |
text-fluid-base | font-size: clamp(0.9375rem, 0.913rem + 0.1087vw, 1rem); line-height: 1.6; |
text-fluid-lg | font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem); line-height: 1.55; |
text-fluid-xl | font-size: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem); line-height: 1.45; |
text-fluid-2xl | font-size: clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem); line-height: 1.3; |
text-fluid-3xl | font-size: clamp(1.5rem, 1.3533rem + 0.6522vw, 1.875rem); line-height: 1.2; |
text-fluid-4xl | font-size: clamp(1.75rem, 1.5543rem + 0.8696vw, 2.25rem); line-height: 1.15; |
text-fluid-5xl | font-size: clamp(2rem, 1.6087rem + 1.7391vw, 3rem); line-height: 1.1; |
text-fluid-6xl | font-size: clamp(2.25rem, 1.663rem + 2.6087vw, 3.75rem); line-height: 1.05; |
Padding 7
Variants: none
| Class | CSS |
|---|---|
p-fluid-xs | padding: clamp(0.5rem, 0.4022rem + 0.4348vw, 0.75rem); |
p-fluid-sm | padding: clamp(0.75rem, 0.5543rem + 0.8696vw, 1.25rem); |
p-fluid-md | padding: clamp(1rem, 0.6087rem + 1.7391vw, 2rem); |
p-fluid-lg | padding: clamp(1.5rem, 0.913rem + 2.6087vw, 3rem); |
p-fluid-xl | padding: clamp(2rem, 1.2174rem + 3.4783vw, 4rem); |
p-fluid-2xl | padding: clamp(3rem, 1.8261rem + 5.2174vw, 6rem); |
p-fluid-3xl | padding: clamp(4rem, 2.4348rem + 6.9565vw, 8rem); |
Padding inline 7
Variants: rtl:ltr:
| Class | CSS |
|---|---|
px-fluid-xs | padding-inline: clamp(0.5rem, 0.4022rem + 0.4348vw, 0.75rem); |
px-fluid-sm | padding-inline: clamp(0.75rem, 0.5543rem + 0.8696vw, 1.25rem); |
px-fluid-md | padding-inline: clamp(1rem, 0.6087rem + 1.7391vw, 2rem); |
px-fluid-lg | padding-inline: clamp(1.5rem, 0.913rem + 2.6087vw, 3rem); |
px-fluid-xl | padding-inline: clamp(2rem, 1.2174rem + 3.4783vw, 4rem); |
px-fluid-2xl | padding-inline: clamp(3rem, 1.8261rem + 5.2174vw, 6rem); |
px-fluid-3xl | padding-inline: clamp(4rem, 2.4348rem + 6.9565vw, 8rem); |
Padding block 7
Variants: none
| Class | CSS |
|---|---|
py-fluid-xs | padding-block: clamp(0.5rem, 0.4022rem + 0.4348vw, 0.75rem); |
py-fluid-sm | padding-block: clamp(0.75rem, 0.5543rem + 0.8696vw, 1.25rem); |
py-fluid-md | padding-block: clamp(1rem, 0.6087rem + 1.7391vw, 2rem); |
py-fluid-lg | padding-block: clamp(1.5rem, 0.913rem + 2.6087vw, 3rem); |
py-fluid-xl | padding-block: clamp(2rem, 1.2174rem + 3.4783vw, 4rem); |
py-fluid-2xl | padding-block: clamp(3rem, 1.8261rem + 5.2174vw, 6rem); |
py-fluid-3xl | padding-block: clamp(4rem, 2.4348rem + 6.9565vw, 8rem); |
Margin 7
Variants: none
| Class | CSS |
|---|---|
m-fluid-xs | margin: clamp(0.5rem, 0.4022rem + 0.4348vw, 0.75rem); |
m-fluid-sm | margin: clamp(0.75rem, 0.5543rem + 0.8696vw, 1.25rem); |
m-fluid-md | margin: clamp(1rem, 0.6087rem + 1.7391vw, 2rem); |
m-fluid-lg | margin: clamp(1.5rem, 0.913rem + 2.6087vw, 3rem); |
m-fluid-xl | margin: clamp(2rem, 1.2174rem + 3.4783vw, 4rem); |
m-fluid-2xl | margin: clamp(3rem, 1.8261rem + 5.2174vw, 6rem); |
m-fluid-3xl | margin: clamp(4rem, 2.4348rem + 6.9565vw, 8rem); |
Gap 7
Variants: none
| Class | CSS |
|---|---|
gap-fluid-xs | gap: clamp(0.5rem, 0.4022rem + 0.4348vw, 0.75rem); |
gap-fluid-sm | gap: clamp(0.75rem, 0.5543rem + 0.8696vw, 1.25rem); |
gap-fluid-md | gap: clamp(1rem, 0.6087rem + 1.7391vw, 2rem); |
gap-fluid-lg | gap: clamp(1.5rem, 0.913rem + 2.6087vw, 3rem); |
gap-fluid-xl | gap: clamp(2rem, 1.2174rem + 3.4783vw, 4rem); |
gap-fluid-2xl | gap: clamp(3rem, 1.8261rem + 5.2174vw, 6rem); |
gap-fluid-3xl | gap: clamp(4rem, 2.4348rem + 6.9565vw, 8rem); |