tailwind-syntax-arbitrary-values
Installation
SKILL.md
Tailwind CSS Syntax: Arbitrary Values
Arbitrary values are Tailwind's escape hatch: any utility can accept a one-off value via square-bracket syntax (or parens for CSS variables in v4). The syntax is identical in v3 and v4 ; the only difference is the v4 parens shorthand for CSS variables and the v4 Oxide engine that generates the CSS roughly 5x faster. Mastering arbitrary values means knowing WHEN to reach for them (rarely) and WHEN to use a theme token (almost always).
Quick Reference
Five arbitrary-value patterns
| Pattern : example : compiles to |
|---|
Value-arbitrary : bg-[#1da1f2] : background-color: #1da1f2 |
Modifier-arbitrary : [&:nth-child(3)]:underline : custom selector wraps the utility |
Variant-arbitrary : data-[state=open]:rotate-180 : [data-state="open"] { rotate: 180deg } |
Arbitrary property : [mask-type:luminance] : mask-type: luminance (no utility namespace at all) |
Type-hinted arbitrary : bg-[length:200px_100px] : disambiguates ambiguous values |