Arbitrary Values

Tailwind's scales cover the overwhelming majority of real design decisions, but not every value you'll ever need exists as a named step. For the exceptions, square-bracket syntax lets you drop in an exact value without leaving your markup.

The basic syntax

<div class="w-[13px] h-[13px] rounded-full bg-red-500"></div>
<div class="top-[117px] absolute"></div>
<div class="bg-[#1da1f2] text-white">Legacy brand blue</div>

w-[13px] compiles directly to width: 13px. Anything inside the brackets is passed through essentially as-is, so it works for pixel values, hex colors, percentages — even full CSS function calls:

<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">...</div>
<div class="bg-[radial-gradient(circle,_var(--color-brand),_transparent)]"></div>

Underscores inside the brackets stand in for spaces, since class names can't contain literal spaces — Tailwind converts them back when generating the CSS.

Arbitrary values still work with every variant

<div class="top-[117px] md:top-[64px] hover:bg-[#1a91da]"></div>

Because arbitrary values are still ordinary utility classes under the hood, they combine with responsive prefixes, state variants, and dark mode exactly like any built-in utility — there's no special case to remember.

When they're the right tool

• Matching an exact spec. A design handoff sometimes specifies a precise value — 117px from the top, a specific brand hex code that doesn't correspond to any named shade — and there's no reason to approximate it with the nearest scale step when you can just write the exact number.
• One-off third-party integration. Overriding a fixed dimension coming from an embedded widget or library component you don't control.
• Rare CSS features without a dedicated utility. Not every CSS property has a named Tailwind utility; arbitrary properties ([mask-type:luminance]) cover the long tail.

When they're a warning sign

Arbitrary values bypass the entire point of a shared scale — every w-[247px] is a value that exists nowhere else in your design system and that nobody chose deliberately, it just happened to measure that in a screenshot. Reaching for top-[13px] repeatedly across a project, when top-3 (0.75rem ≈ 12px) or top-4 would have been visually indistinguishable, usually means the design would benefit from being pulled onto the real scale — or, if the value genuinely recurs, promoted into a proper theme variable via @theme (covered in the previous lesson) so it has a name and appears consistently.

<!-- If this exact value shows up in five components, it's not "arbitrary" anymore -->
<div class="max-w-[68rem]">...</div>

@theme {
  --breakpoint-content: 68rem; /* now it's `max-w-content` everywhere */
}

A good habit: treat arbitrary values as an escape hatch for genuine one-offs, not a substitute for learning the scale. If you find yourself using the same bracketed value in more than one place, that's the signal to give it a real name in your theme instead.