Arbitrary Values and Properties

Escape hatches

When a value is not in the scale, use square brackets: top-[117px], bg-[#1da1f2], grid-cols-[1fr_2fr] (underscores stand for spaces), or reference a variable with parentheses: bg-(--my-color). Arbitrary properties set any CSS property: [mask-type:luminance]. Arbitrary variants target custom selectors: [&>li]:mt-2. If the same arbitrary value appears repeatedly, promote it to a theme variable.

Arbitrary values in practice

Use sparingly.

<div class="grid grid-cols-[200px_1fr] gap-4">
  <div class="h-[calc(100dvh-4rem)] bg-[#0b1220]"></div>
  <ul class="[&>li]:py-2 [&>li:not(:last-child)]:border-b">
    <li>One</li><li>Two</li><li>Three</li>
  </ul>
</div>

Treat repeated arbitrary values as a smell

Three copies of the same bracket value means it belongs in @theme.

Quick check: How do you write a space inside an arbitrary value?

• With a comma only
• With %20
• Spaces are allowed directly
• With an underscore, as in grid-cols-[1fr_2fr]