Arbitrary Values
Use one-off values with square-bracket notation.
Syntax
class="bg-[#1da1f2] w-[347px]"When the design scale does not have the exact value you need, use arbitrary values in square brackets.
w-[347px]— an exact width.bg-[#1da1f2]— an exact hex color.top-[13px]— a precise offset.
Use these sparingly; the scale keeps things consistent.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer positions an absolutely placed element at exactly 13px from the top using top-[13px] when no standard utility matches.
- A background image is set to a custom URL using bg-[url('/hero.jpg')] directly in HTML without writing any CSS.
- A grid with a non-standard column count uses grid-cols-[repeat(7,1fr)] to create a seven-column calendar layout.
More examples
Arbitrary spacing value
Square-bracket notation lets you use any CSS value — arbitrary numbers, rems, or percentages — when the design token scale does not have an exact match.
<div class="mt-[72px] px-[22px] w-[340px]">
<p class="text-gray-700">Pixel-perfect custom spacing</p>
</div>Arbitrary color and size
An exact hex color not in Tailwind's palette is applied via bg-[#c026d3], keeping the value in the markup without a config change.
<button class="bg-[#c026d3] text-white px-5 py-2 rounded
hover:bg-[#a21caf]">
Brand Button
</button>Arbitrary grid template
An arbitrary grid-template-columns value sets a fixed sidebar, a fluid column, and an auto-sized column in one utility class.
<div class="grid grid-cols-[200px_1fr_auto] gap-4">
<aside class="bg-gray-50 p-4">Fixed sidebar</aside>
<main class="bg-white p-4">Fluid main</main>
<aside class="bg-gray-50 p-4 w-max">Auto aside</aside>
</div>
Discussion