Tailwind CSS v4 supports bracket-notation arbitrary values on most utilities: w-[300px], p-[13px], rounded-[2vw], blur-[5px], indent-[3rem], etc. The bracketed value is passed through as-is to the CSS output.
Current state
Only text-[<color>] is supported, via a hardcoded Rule::Dynamic match in the color module. All other groups are noted as "arbitrary missing" in RULE_GROUPS.md — bg-color, border-color, outline-color, accent-color, caret-color, text-decoration-color, text-indent, among others.
Scope
- Engine-level parsing of
-[<value>] tokens so rule modules can opt in to arbitrary resolution without each needing a custom Rule::Dynamic handler
- Also cover the CSS custom property shorthand
-(--my-var) (Tailwind v4 syntax for var(--my-var))
Tailwind CSS v4 supports bracket-notation arbitrary values on most utilities:
w-[300px],p-[13px],rounded-[2vw],blur-[5px],indent-[3rem], etc. The bracketed value is passed through as-is to the CSS output.Current state
Only
text-[<color>]is supported, via a hardcodedRule::Dynamicmatch in the color module. All other groups are noted as "arbitrary missing" in RULE_GROUPS.md — bg-color, border-color, outline-color, accent-color, caret-color, text-decoration-color, text-indent, among others.Scope
-[<value>]tokens so rule modules can opt in to arbitrary resolution without each needing a customRule::Dynamichandler-(--my-var)(Tailwind v4 syntax forvar(--my-var))