Skip to main content

FUI2020: Arbitrary utility value is forbidden

moderate

A Tailwind class carries a bracketed value instead of a named utility.

Details

diagnostic
{
  "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.