Arbitrary Values in Tailwind

Arbitrary values let you use any CSS value inside a Tailwind utility class using bracket notation. This bridges the gap between Tailwind's scale and one-off design requirements.

Syntax examples

<!-- Custom pixel width -->
<div class="w-[340px]"></div>

<!-- Custom hex color -->
<div class="bg-[#1a1a2e] text-[#e0e0e0]"></div>

<!-- Custom grid template -->
<div class="grid grid-cols-[1fr_2fr_1fr] gap-4"></div>

<!-- calc() expression -->
<div class="h-[calc(100vh-4rem)]"></div>

<!-- Custom line-height -->
<p class="leading-[1.8]"></p>

CSS custom properties

<div class="bg-[var(--brand-color)]"></div>

When to use arbitrary values

Use for: pixel-perfect one-off dimensions, external brand colors you cannot add to config, complex calc() expressions. Avoid for values that repeat across the project — those belong in theme.extend.

<!-- Good: one-off design requirement -->
<div class="top-[117px]"></div>

<!-- Better: define in config if used in 5+ places -->
<div class="top-header"></div>