Arbitrary Values
Any utility not covered by a named class can be expressed with square brackets — the value inside is used directly, with underscores standing in for spaces in multi-token values. What isn't consistent across the ~24 arbitrary-capable prefixes is which of them also support a responsive breakpoint prefix and the !important prefix — this page is the full answer.
<div class="w-[320px] bg-[#f0f4f8]">…</div>Support responsive breakpoints (and !important)
{prefix}-{bp}-[value] and !{prefix}-[value] both work:
| Pattern | Example | Notes |
|---|---|---|
m-[...] / p-[...] / mt-[...] / px-[...] / etc. | px-[2rem] | Full 14-prefix spacing family — see Spacing |
gap-[...] / row-gap-[...] / col-gap-[...] | gap-[1rem_2rem] | See Spacing |
g-[...] / gx-[...] / gy-[...] | gx-[2rem] | Grid gutters — see Grid |
border-[...] / border-top-[...] / border-x-[...] / etc. | border-top-[2px_dashed_red] | See Borders |
rounded-[...] / rounded-top-[...] / etc. | rounded-[8px_8px_0_0] | See Borders |
shadow-[...] | shadow-[0_4px_6px_rgba(0,0,0,.1)] | |
outline-[...] | outline-[2px_dashed_red] | |
gtc-[...] / gtr-[...] | gtc-[260px_1fr] | grid-template-columns/rows |
No responsive form (bare + !important only)
| Pattern | Example | Notes |
|---|---|---|
w-[...] / h-[...] / max-w-[...] / min-w-[...] / max-h-[...] / min-h-[...] | w-[320px] | See Sizing |
text-[...] | text-[#e63946] | Length unit → font-size, else → color |
fs-[...] | fs-[1.25rem] | Always font-size, no ambiguity |
bg-[...] | bg-[linear-gradient(...)] | Uses background shorthand, not background-color |
opacity-[...] | opacity-[0.3] | |
z-[...] | z-[100] | |
fw-[...] | fw-[350] | |
top-[...] / bottom-[...] / left-[...] / right-[...] / inset-[...] | inset-[0_1rem] | See Position |
object-position-[...] | object-position-[center_top] |
transition-[...], duration-[...], and cursor-[...] don't support the ! prefix at all
! for !important. These three are the only exceptions — their regex simply doesn't include the optional ! group, so !transition-[...] doesn't compile to anything; it just fails the lookup like a typo would.| Pattern | Example |
|---|---|
transition-[...] | transition-[background-color_0.3s_ease] |
duration-[...] | duration-[400ms] |
cursor-[...] | cursor-[crosshair] |
Multi-value vs. single-value
Whether a prefix accepts a multi-token, underscore-separated value depends entirely on whether it maps to a CSS shorthand property or a longhand one — this trips people up most often on spacing (p-[10px_20px] works, px-[10px_20px] doesn't). See the Spacing page for the full explanation.