---
title: Configuration
description: The custom properties and setter utilities that scope scaling bounds, tune curve sharpness, and switch the measured axis between viewport and container.
sidebar:
  order: 3
---

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:

```html
<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:

```html
<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.

<Demo hint="Drag the corner to resize this container ->" resize>
  <div class="f6y-demo-track">
    <div class="f6y-demo-box f6y-p-2/8 f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
      Container-scoped padding
    </div>
  </div>
</Demo>

## 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.

<Demo hint="Drag the corner to resize this container ->" resize>
  <div class="f6y-demo-track">
    <div class="f6y-demo-box f6y-exp-p-2/8 f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
      base 2 (default)
    </div>
    <div class="f6y-demo-box f6y-exp-p-2/8 f6y-base-4 f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
      base 4 (sharp)
    </div>
  </div>
</Demo>

## 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:

```html
<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.

**[All Utilities](/utilities)**

Browse all 11 property families.

**[Container-Based Scaling](/recipes/container-based-scaling)**

Recipes for container-scoped designs.