Tailwind CSS Tutorial · Customizing Tailwind · Lesson 20 of 27

Arbitrary Values and Properties

One-off values with square brackets such as w-[37rem] and bg-[#bada55], CSS variables in classes, and arbitrary properties.

Create a free account to save this page, take notes and track your progress. Sign in

Square brackets

When the scale doesn't have the value you need, write it in brackets:

w-[37rem], top-[117px], bg-[#0f766e], text-[clamp(1.5rem,4vw,3rem)]
Use _ for spaces: grid-cols-[1fr_2fr]
CSS variables with parentheses: bg-(--my-color), w-(--sidebar-width)

Arbitrary valuesTry it yourself

<div class="space-y-4 p-6">
  <div class="h-12 w-[13.5rem] rounded bg-[#0f766e] px-3 py-3 text-sm text-white">w-[13.5rem] bg-[#0f766e]</div>
  <p class="text-[clamp(1.25rem,4vw,2.25rem)] font-bold">Fluid size with clamp()</p>
  <div style="--accent: #e11d48" class="rounded border-l-4 border-(--accent) bg-rose-50 p-3">border-(--accent) from a CSS variable</div>
</div>

Arbitrary properties and variants

[mask-type:luminance] sets any CSS property. Arbitrary variants target any selector: [&>li]:py-1 styles direct li children, [&:nth-child(3)]:text-red-600 the third child.

Arbitrary variantsTry it yourself

<ul class="m-6 max-w-sm rounded-lg border p-3 [&>li]:border-b [&>li]:py-2 [&>li:last-child]:border-0">
  <li>Styled by the parent</li>
  <li>with [&amp;>li]:border-b</li>
  <li>no classes on each li</li>
</ul>

If you use the same arbitrary value often, add it to @theme instead.

Test yourself

How do you write a space inside an arbitrary value?

With an underscore, e.g. grid-cols-[1fr_2fr]
With %20
With a backslash
Spaces aren't allowed in any form

Show answer

Answer: With an underscore, e.g. grid-cols-[1fr_2fr]

Tailwind turns _ into a space in arbitrary values.

Was this page helpful?