Arbitrary Values

Many utilities are driven by your theme, but sometimes you need a one-off value outside it. Use square brackets for arbitrary values.

Basic arbitrary values

html
<button class="bg-[#316ff6] ...">Sign in with Facebook</button>

This is great for one-off colors like the Facebook blue.

Complex values

Arbitrary values work everywhere, including complex grid layouts:

html
<div class="grid grid-cols-[24rem_2.5rem_minmax(0,1fr)]">...</div>

And with calc():

html
<div class="max-h-[calc(100dvh-( - spacing(6)))]">...</div>

Arbitrary properties

Generate completely arbitrary CSS, including CSS variables:

html
<div class="[ - gutter-width:1rem] lg:[ - gutter-width:2rem]">...</div>

Whitespace gotchas

Spaces become underscores in arbitrary values:

html
<div class="grid-cols-[1fr_500px_2fr]">...</div>

Underscores are preserved where spaces are invalid, like in URLs:

html
<div class="bg-[url('/what_a_rush.png')]">...</div>

Escape a real underscore with a backslash:

html
<div class="before:content-['hello\_world']">...</div>

Ambiguity

Some classes can mean different things. text-[22px] is font-size, while text-[#bada55] is color - Tailwind auto-detects. For CSS variables, add a data-type hint:

html
<div class="text-(length: - my-var)"></div>
<div class="text-(color: - my-var)"></div>

CSS variable shorthand

bg-( - my-brand-color) is shorthand for bg-[var( - my-brand-color)].

TL;DR

• Use [...] for one-off values.
• Spaces become underscores inside brackets.
• text-[22px] is size; text-[#bada55] is color.
• Arbitrary properties and variants let you write any CSS.