no-arbitrary-values

Examples

Arbitrary values are reported even when an equivalent token or scale step exists, and the message names that equivalent: spacing from your --spacing unit, held to the approved steps for padding, margin and gap (variants, negatives and important markers preserved), radii and font sizes from the theme scale, colours from the nearest declared tokens. Arbitrary variants select elements; variable shorthands read CSS variables. Neither is an arbitrary value. An arbitrary property such as [padding:13px] is, and its category decides whether a layout allowance covers it.

A grid track list is not reported either. Tailwind has no scale for track templates, so a grid-cols-[…] or grid-rows-[…] value built only from fr, auto, min-content, max-content, lengths in rem, px, ch or %, minmax(), fit-content() and repeat() passes. Use it for a list and detail split view (lg:grid-cols-[minmax(0,24rem)_1fr]) or a pinned header and footer (grid-rows-[auto_1fr_auto]). A colour, calc() or unknown word in the list is still reported.

"no-arbitrary-values": ["error", { "allow": ["layout"] }]

{{-- Allowed: tokens, scale values, arbitrary variants, variable shorthands. --}}
<div class="p-4 rounded-lg bg-primary data-[state=open]:flex [&_svg]:size-4 bg-(--brand)">Account</div>
<div class="w-[320px]">Sidebar (layout is allowed above)</div>
<div class="grid lg:grid-cols-[minmax(0,24rem)_1fr]">List and detail (a grid track list)</div>

{{-- Reported. --}}
<div class="p-[13px] rounded-[16px] bg-[#333] [padding:13px]">Account</div>

"p-[12px]" hardcodes an off-token value. Use "p-3" instead (same value, on the scale).
"p-[13px]" hardcodes an off-token value. Nearest on the scale: p-3, p-3.5.
"rounded-[16px]" hardcodes an off-token value. Use "rounded-lg" instead (same value, on the scale).
"text-[13px]" hardcodes an off-token value. Nearest on the scale: text-xs, text-sm.
"bg-[#333]" hardcodes a color. Nearest theme tokens: foreground, inverse. Use one of those, or declare --color-<name> in resources/css/ui.css.

Allow an exception

Allow an exact class (its variant forms included), a class group, a category, or open a group for one component.

"no-arbitrary-values": ["error", {
  "allow": ["p-[13px]"],
  "contracts": [{ "pattern": "^sidebar$", "allow": ["w-*"] }]
}]

Limits

• Exact spacing replacements need a px, rem or em value that lands on a quarter step of the spacing unit, and on an approved step for padding, margin and gap; otherwise the two nearest approved steps are named.
• ui:check --fix applies the exact replacements; nearest-colour suggestions need --unsafe-fixes.
• Font-size and radius comparisons read px and rem, plus the simple calc() forms the theme uses. Values without a supported scale, such as shadows, get general guidance.
• Off-scale numeric steps (p-13) and inline style lengths stay with no-raw-spacing.

Configure

In the lint.rules block of ui.json. It accepts allow, deny, contracts, message, include, exclude; see the policy for what the entries match.

"no-arbitrary-values": ["warning", { "allow": [...], "deny": [...], "contracts": [], "message": "...", "include": ["resources/views/components/ui"], "exclude": ["resources/views/legacy/**"] }]

php artisan ui:check --explain no-arbitrary-values

Suppress one line

{{-- ui-lint-disable-next-line no-arbitrary-values: reason --}}