Use arbitrary values carefully

Sometimes the scale doesn’t have the value you need. Tailwind lets you write any value in square brackets:

<div class="grid-cols-[16rem_1fr]">...</div>

This generates grid-template-columns: 16rem 1fr. The underscore stands for a space, because a class name can’t contain spaces.

Arbitrary values still work with every variant:

<aside class="w-[18rem] lg:w-[22rem]">...</aside>

You can even set a property Tailwind has no utility for:

<div class="[content-visibility:auto]">...</div>

When they’re fine

Use bracket values for a real exception, a value that comes from an external design file, or a quick experiment. They keep the declaration next to the element, which is good. But they skip the shared scale, which is the whole point of the theme.

When to promote to a token

If the same value shows up again and again, give it a name. w-[18rem] copied across ten files is still a magic number, just a well-hidden one. A theme token like --container-sidebar: 18rem says why the number exists, and lets you change it in one place.

Custom properties

For a value that already lives in a CSS variable, Tailwind v4 has a shorter syntax with parentheses:

<div class="w-(--panel-width)">...</div>

This generates width: var(--panel-width). The value can change at runtime, and you never build a class name dynamically, so detection still works.

Two warnings

Never put user input in an arbitrary class. bg-[${userColor}] is source code for your stylesheet, not a safe place for untrusted text. Map allowed values to complete classes instead.

And be honest about what an arbitrary value is hiding. Before writing left-[137px], ask whether the placement should come from Grid, from gap, or from normal flow. A magic pixel offset usually means the layout model is wrong.

Try this: use one arbitrary grid track, inspect the generated CSS, then reuse it in a second component. Ask yourself whether the repetition revealed a theme token or whether the value is still a legitimate one-off.