Use arbitrary values carefully

Bracket notation accepts a one-off value:

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

Underscores represent spaces where a class token cannot contain them, so this becomes grid-template-columns: 16rem 1fr. Arbitrary values still use Tailwind’s variant and utility system:

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

You can also write a property Tailwind does not expose directly:

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

Use these forms for a real exception, a value supplied by an external design, or a quick experiment. They keep the declaration local but bypass the shared theme scale.

If the same value appears repeatedly or represents a design concept, give it a theme name. w-[18rem] copied across ten files is still a magic value. A named container or spacing token communicates why the number exists and makes later changes safer.

For an existing CSS custom property, current Tailwind supports concise custom-property forms in many utilities, such as w-(--panel-width). This preserves a runtime value without constructing a class name dynamically.

Do not insert untrusted text into an arbitrary class. A class string is source code for styling, not a safe place for user-supplied CSS. Map allowed application values to complete classes.

Arbitrary values can also hide a wrong layout model. Before adding left-[137px], ask whether Grid alignment, gap, or normal flow should own the placement.

Your action is to use one arbitrary track definition, inspect its generated CSS, then use it in a second component. Decide whether repetition revealed a theme token or whether the value is still a legitimate exception.