Arbitrary Values and Properties
Reach exact one-off values with square-bracket syntax when the design scale isn't enough.
The design scale covers ninety-five percent of real work. For the rest, Tailwind gives you a controlled escape hatch: square brackets. You get a precise value without leaving your markup and without inventing a new class.
Arbitrary values
Put any value inside [ ] after a known prefix:
<div class="top-[117px] w-[calc(100%-4rem)]"></div>
<div class="bg-[#1da1f2] text-[13px]"></div>
<div class="grid grid-cols-[1fr_500px_2fr]"></div>Underscores become spaces, so grid-cols-[1fr_500px_2fr] reads as three tracks. Need a literal underscore? Escape it with a backslash.
Arbitrary properties
When no utility exists at all, write the raw CSS declaration in brackets:
<div class="[mask-type:luminance] [text-wrap:balance]"></div>Pulling from CSS variables
You can read a variable with bg-[var(--x)], or use v4's tidy shorthand bg-(--x). This is how you bridge Tailwind utilities and dynamic, JS-driven values.
Brackets are a scalpel, not a lifestyle. If the same magic number shows up three times, that is your design system quietly asking for a token.
Example
When to use it
- A developer sets a clip-path that isn't in the Tailwind scale using [clip-path:polygon(0_0,100%_0,100%_80%,0_100%)] directly in the class attribute.
- A layout requires a 7-column grid for a calendar view, achieved with grid-cols-[repeat(7,1fr)] without adding a custom config entry.
- A component needs a z-index of 9999 for a portal element, set precisely with z-[9999] using arbitrary value notation.
More examples
Arbitrary CSS property
The [property:value] syntax applies any CSS property not covered by a utility class, maintaining variant support like hover: and md:.
<div class="[clip-path:polygon(0_0,100%_0,100%_80%,0_100%)] bg-indigo-600 h-64">
<p class="text-white p-8">Clipped hero section</p>
</div>Arbitrary z-index
z-[9999] places the toast container above all other stacking contexts using an exact integer value outside Tailwind's preset z-index scale.
<div id="toast-portal" class="fixed top-4 right-4 z-[9999] flex flex-col gap-2">
<div class="bg-white border shadow rounded-lg px-4 py-3 text-sm">
File uploaded successfully.
</div>
</div>Arbitrary gradient angle
A multi-stop gradient at a custom 135-degree angle is set via an arbitrary value, going beyond the direction utilities like bg-gradient-to-br.
<div class="bg-[linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899)] h-40 rounded-xl">
</div>
Discussion