Escape Hatch — When the Scale Isn't Enough
Arbitrary Values & Properties
Use square-bracket syntax for one-off values, arbitrary CSS properties, and CSS-variable shorthands when the design scale falls short.
What you'll learn
- Use value brackets like w-[37rem]
- Use arbitrary properties like the mask-type form
- Use the CSS-variable shorthand with parentheses
The design scale covers the vast majority of cases, but sometimes you need an exact value. Square-bracket syntax is the escape hatch — powerful, and deliberately a little ugly so you do not overuse it.
Arbitrary Values
Put any valid CSS value in brackets after the utility name:
<div class="top-[117px] w-[37rem] bg-[#bada55]
grid-cols-[1fr_320px_1fr]">
Pixel-precise where the scale has no token
</div>Underscores become spaces, so grid-cols-[1fr_320px_1fr] is a three-track grid template. This works with variants too: lg:w-[42rem].
Arbitrary Properties
When no utility exists at all, write the whole declaration in brackets:
<div class="[mask-type:alpha] [content-visibility:auto]
hover:[mask-type:luminance]">
Arbitrary CSS properties, still variant-aware
</div>This generates a real, variant-capable utility for a property Tailwind has no named class for.
CSS-Variable Shorthand
Referencing a custom property is so common that v4 adds a parenthesis shorthand:
<p class="text-(--brand)">Same as text-[var(--brand)]</p>
<div class="grid-cols-(--layout)">Same as grid-cols-[var(--layout)]</div>text-(--brand) is exactly text-[var(--brand)], just shorter.
A standing rule: prefer a theme token over an arbitrary value. Arbitrary values bypass your design system, so reach for them only for genuine one-offs — if you write the same bracket value twice, promote it to a @theme token instead.