When standard utilities are not enough
Tailwind supports arbitrary values in square brackets, such as w-[37rem], grid-cols-[200px_1fr] or bg-[#123456]. This is useful for one-off design values.
Arbitrary values are an escape hatch
If the same custom value appears repeatedly, promote it into a theme variable rather than repeating arbitrary values. This turns a one-off decision into a reusable design token.
Whitespace in arbitrary values
Because spaces separate class names in markup, Tailwind uses underscores to represent spaces inside arbitrary values and selectors.
ADVERTISEMENT