Customization

Arbitrary Values

When the design scale does not have the exact value you need, arbitrary values let you drop any custom value inside square brackets.

The square-bracket escape hatch

Write the property utility, then put the exact value in brackets: w-[350px], text-[#1da1f2], top-[13px], grid-cols-[1fr_2fr].

Exact width and a custom brand color

Example

<div class="w-[280px] bg-[#1da1f2] text-white p-4 rounded-lg">
  Exactly 280px wide, Twitter-blue background.
</div>

⚠️

Use arbitrary values sparingly. Sticking to the scale keeps your UI consistent; reach for brackets only for genuine one-offs.