# Arbitrary Values and Properties — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/x-arbitrary

> One-off values in square brackets.

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

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

**Quiz:** How do you write a space inside an arbitrary value?

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

*Answer:* With an underscore, as in grid-cols-[1fr_2fr]. Class names cannot contain spaces.