FUI2020: Arbitrary utility value is forbidden
moderateA Tailwind class carries a bracketed value instead of a named utility.
Details
{
"code": "FUI2020",
"ruleId": "tailwind/no-arbitrary-value",
"category": "Tokens",
"defaultSeverity": "moderate",
"lifecycle": "experimental",
"fixAvailable": false,
"evidenceRequired": true
}Guidance
## What it means
A utility in this class list uses an arbitrary value: a bracketed value such as `p-[13px]` or `w-[317px]`, or an arbitrary property such as `[padding:13px]`. The finding quotes the exact class it read.
The check reads past the variants to the final utility, so `hover:p-[13px]` is reported. A bracketed variant selector is not an arbitrary value on its own: `[&_svg]:size-4` passes, while `[&_svg]:size-[13px]` does not.
This rule is off by default. It fires only after your project turns it on:
```ts govern: { rules: { 'tailwind/no-arbitrary-value': { enabled: true, severity: 'warn' }, }, }, ```
Turning it on is a policy choice about class grammar. It does not replace the scale and palette rules, which judge the resolved value rather than its spelling.
## Why it matters
An arbitrary value writes a one-off number into a screen. It is invisible to the theme, so it never changes when the theme changes, and the next person reading the file cannot tell whether 317 pixels was a decision or a leftover.
## Before
```tsx export function Panel() { return <div className="w-[317px] p-[13px] text-[#123456]">…</div>; } ```
## Repair
Use the named utilities the project's theme already generates. The nearest named step rarely matches the one-off number exactly, and choosing it deliberately is the point of the rule:
```tsx export function Panel() { return <div className="w-80 p-3 text-brand">…</div>; } ```
When the value is genuinely new, name it in the theme first, then use the generated utility:
```css @import "tailwindcss";
@theme { --color-brand: #123456; } ```
When the property belongs to an approved component rather than the call site, use that component's prop instead of any class — see [FUI1008](/errors/FUI1008).
There is no automatic fix for this code. The replacement is a design decision, and rewriting the number would change the rendered output.
## Verify the change
Run `npx @usefragments/cli check --changed --format agent`, confirm FUI2020 is absent, then run `npx @usefragments/cli check --changed --ci`.
Intentional exception? Use a narrow, reasoned directive from the in-source exception reference.
Next steps
- RulesThe rules that emit FUI codes.
- ExceptionsIn-source allows and Cloud exceptions.