Lesson 7 +10 XP

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

<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:

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

And with calc():

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

Arbitrary properties

Generate completely arbitrary CSS, including CSS variables:

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

Whitespace gotchas

Spaces become underscores in arbitrary values:

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

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

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

Escape a real underscore with a backslash:

<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:

<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.

Arbitrary Values