# Avoid Arbitrary Values

**SHOULD** · **ID:** `performance-avoid-arbitrary` · **Category:** performance
**Source:** [Tailwind](https://tailwindcss.com/docs)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-avoid-arbitrary

> SHOULD: Avoid arbitrary values [17px]; use theme tokens (p-4, text-foreground)

Prefer theme tokens over arbitrary bracket values

Arbitrary values create one-off utility classes that bypass your design system's spacing/color scale, create inconsistencies, generate additional CSS, and make maintenance harder with magic numbers scattered throughout.

## Bad — do not do this

`performance-avoid-arbitrary-bad`

```tsx
export function AvoidArbitraryBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Arbitrary Value Usage</h4>
        <div className="space-y-3">
          <div className="p-[17px] bg-muted rounded">
            <code className="text-xs text-error">p-[17px]</code>
            <span className="text-sm text-muted-foreground ml-2">- magic number</span>
          </div>
          <div className="text-[#1a1a1a] dark:text-[#e5e5e5]">
            <code className="text-xs text-error bg-muted px-1 rounded">text-[#1a1a1a]</code>
            <span className="text-sm text-muted-foreground ml-2">- hardcoded hex</span>
          </div>
          <div className="w-[327px] h-8 bg-primary/20 rounded flex items-center justify-center">
            <code className="text-xs text-error">w-[327px]</code>
            <span className="text-sm text-muted-foreground ml-2">- arbitrary width</span>
          </div>
        </div>
      </div>
      <div className="text-sm text-muted-foreground">
        <strong className="text-foreground">Problems:</strong>
        <ul className="mt-1 space-y-1">
          <li>Bypasses design system</li>
          <li>Creates one-off CSS rules</li>
          <li>Harder to maintain</li>
        </ul>
      </div>
      <p className="text-xs text-error">
        Arbitrary values create inconsistency and larger CSS bundles
      </p>
    </div>
  );
}
```

## Good — do this

`performance-avoid-arbitrary-good`

```tsx
export function AvoidArbitraryGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Theme Token Usage</h4>
        <div className="space-y-3">
          <div className="p-4 bg-muted rounded">
            <code className="text-xs">p-4</code>
            <span className="text-sm text-muted-foreground ml-2">= 1rem (16px)</span>
          </div>
          <div className="text-foreground">
            <code className="text-xs bg-muted px-1 rounded">text-foreground</code>
            <span className="text-sm text-muted-foreground ml-2">= semantic color</span>
          </div>
          <div className="w-80 h-8 bg-primary/20 rounded flex items-center justify-center">
            <code className="text-xs">w-80</code>
            <span className="text-sm text-muted-foreground ml-2">= 20rem</span>
          </div>
        </div>
      </div>
      <div className="text-sm text-muted-foreground">
        <strong className="text-foreground">Benefits:</strong>
        <ul className="mt-1 space-y-1">
          <li>Consistent spacing scale</li>
          <li>Smaller CSS bundle (reused classes)</li>
          <li>Design system compliance</li>
        </ul>
      </div>
      <p className="text-xs text-success">
        Theme tokens ensure consistency and optimize CSS output
      </p>
    </div>
  );
}
```

## References

- [Tailwind Customization](https://tailwindcss.com/docs/theme)
- [Tailwind Theme Configuration](https://tailwindcss.com/docs/theme)