| description | Use when needing a one-off value that is not in the theme: specific hex colors, arbitrary pixel sizes, calc() expressions, custom grid templates, unusual font sizes, specific transforms, custom selectors, runtime CSS-variable values. Use also when reading existing Tailwind markup and encountering `bg-[#1da1f2]`, `w-[calc(100%-2rem)]`, `data-[state=open]:`, `[mask-type:luminance]`, `bg-(--brand)`, `[&_p]:`, or any other square-bracket / parens-bracket utility, and needing to know what it compiles to. Use also when an arbitrary value is being misinterpreted (background-size vs background-position, font-size vs color) and a type hint is required. Prevents (a) reaching for arbitrary syntax when a theme token already exists (lazy arbitrary values fragment design systems), (b) dynamic class-string concatenation like `bg-[${color}]` that never appears as a literal token and silently generates no CSS, (c) using v4 parens CSS-var syntax `bg-(--brand)` in a v3 project where it is parsed incorrectly, (d) using literal spaces inside `[...]` which terminates the class-name token, (e) mistaking a type-hint prefix as the property name itself (`text-[color:var(--c)]` is a `color` utility, not a property assignment), and (f) reaching for `text-[14.5px]` when `text-base/[1.4]` size-plus-line-height syntax fits, or `mt-17` in v4 where dynamic integer spacing avoids arbitrary syntax entirely. Covers the complete arbitrary-value system: value-arbitrary `bg-[#hex]`, `w-[calc()]`, `text-[Npx]`, `top-[-Npx]`, modifier-arbitrary `[&:nth-child(3)]:`, `[&>*]:`, `[&_p]:`, variant-arbitrary `data-[state=open]:`, `aria-[expanded=true]:`, `supports-[display:grid]:`, arbitrary-property `[mask-type:luminance]`, `[scroll-snap-stop:always]`, type-hint disambiguation `bg-[length:200px_100px]`, `bg-[image:url(...)]`, `text-[color:var(--c)]`, `text-[length:var(--c)]`, CSS-variable shorthand `bg-(--brand)` (v4 parens) vs `bg-[var(--brand)]` (v3 brackets), space encoding with `_`, comma encoding with `_` in v4 (`grid-cols-[max-content_1fr]`), source-detection rules (classes must be literal whole tokens), JIT performance model (v3 JIT vs v4 Oxide), and the v4 dynamic-integer fallback for spacing that obviates many arbitrary use cases. Keywords: arbitrary value, arbitrary class, brackets syntax, bracket notation, one-off color, bg-[hex], w-[calc], text-[px], custom value, custom selector, arbitrary variant, arbitrary modifier, arbitrary property, [mask-type], data-[state], aria-[expanded], type hint, length color image, bg-[length:], text-[color:], CSS variable Tailwind, bg-(--var), v4 parens syntax, bg-[var()], v3 brackets, underscore space, why does my arbitrary class not work, dynamic class not generated, JIT compiler, just in time, Oxide engine, performance, literal token, class detection, source scanning, mt-17, dynamic spacing.
|
