Configuration
The custom properties and setter utilities that scope scaling bounds, tune curve sharpness, and switch the measured axis between viewport and container.
Fluidity exposes five custom CSS properties to configure how every fluid utility behaves. All inherit, so setting one on an ancestor scopes every descendant fluid utility beneath it.
The five custom properties
| Property | Default | Setter utilities | Purpose |
|---|---|---|---|
--f6y-axis |
100vw |
f6y-axis-vw, f6y-axis-vh, f6y-axis-vmin, f6y-axis-vmax, f6y-axis-cqi, f6y-axis-cqb, f6y-axis-cqw, f6y-axis-cqh, f6y-axis-cqmin, f6y-axis-cqmax, f6y-axis-[<length>] |
The measured length (viewport, container, or custom). |
--f6y-lower |
var(--breakpoint-sm, 40rem) |
f6y-lower-sm, f6y-lower-md, etc. (breakpoint keys), f6y-lower-sm, f6y-lower-md, etc. (container keys), f6y-lower-[<length>] |
Start of the scaling ramp. |
--f6y-upper |
var(--breakpoint-2xl, 96rem) |
f6y-upper-sm, f6y-upper-md, etc. (breakpoint keys), f6y-upper-sm, f6y-upper-md, etc. (container keys), f6y-upper-[<length>] |
End of the scaling ramp. |
--f6y-base |
2 |
f6y-base-1.5, f6y-base-2, f6y-base-3, f6y-base-4, etc. |
Curve sharpness for exp/log (must be > 1). |
--f6y-ratio |
2 |
f6y-ratio-1.5, f6y-ratio-2, f6y-ratio-3, etc. |
Max-from-min multiplier when you omit the value modifier. |
Scoping with inheritance
Because these properties inherit, you can set them on a container and every fluid utility inside responds:
<div class="f6y-lower-[20rem] f6y-upper-[60rem]">
<!-- All fluid utilities here scale between 20rem and 60rem -->
<p class="f6y-text-base/2xl">This scales from var(--text-base) to var(--text-2xl)</p>
<div class="f6y-p-4/12">This padding scales from 1rem to 3rem</div>
</div>Container-based scaling
To scale based on a container’s size instead of the viewport, use f6y-axis-cqi (container query inline size) and set container-type on an ancestor:
<div class="@container">
<article class="f6y-axis-cqi f6y-lower-[20rem] f6y-upper-[50rem]">
<!-- All utilities here scale based on this article's width -->
<h2 class="f6y-text-lg/3xl">Container-scoped heading</h2>
<p class="f6y-p-2/8">Container-scoped padding</p>
</article>
</div>The @container class is Tailwind’s shorthand for container-type: inline-size.
Every utility nested under f6y-axis-cqi then responds to that container’s inline size instead of the viewport.
Live demo: Container-scoped scaling
This demo box scales its padding based on its own container width (not the viewport). Drag the resize handle to see the padding change within the demo’s bounds.
Drag the corner to resize this container ->
Container-scoped padding
Tuning curve sharpness with --f6y-base
Exponential and logarithmic curves bend based on --f6y-base.
Higher bases (4, 8) create sharper curves.
Lower bases (1.5) flatten them.
In the demo below, the left box uses the default base 2, and the right box forces base 4.
Both use f6y-exp-p-2/8.
Notice how base 4 keeps padding much closer to the min (0.5rem) until the end, then ramps faster.
Drag the corner to resize this container ->
base 2 (default)
base 4 (sharp)
Deriving max from min with --f6y-ratio
When you omit the max value (for example, f6y-p-2 instead of f6y-p-2/8), Fluidity computes the max as min × --f6y-ratio.
The default ratio is 2, so f6y-p-2 becomes f6y-p-2/4.
Override --f6y-ratio to change this derivation:
<div class="f6y-ratio-3">
<!-- f6y-p-2 now means f6y-p-2/6 (2 × 3) -->
<p class="f6y-p-4">This padding scales from 1rem to 3rem</p>
</div>The ratio setter utilities accept numeric values: f6y-ratio-1.5, f6y-ratio-2, f6y-ratio-3, etc.