# Tailwind Defaults First

**MUST** · **ID:** `performance-ibelick-tailwind-defaults` · **Category:** performance
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-ibelick-tailwind-defaults

> MUST: Use Tailwind CSS defaults unless custom values already exist or are explicitly requested. Arbitrary values (w-[347px]) indicate design system gaps.

Use Tailwind CSS default spacing, colors, and sizing scales unless a custom design token exists

The two escapes are the interesting part: a custom value is allowed when the project ALREADY has one (you are following an existing token, not inventing one) or when it was explicitly asked for. Everything else takes the default scale. The failure this prevents is the arbitrary-value drift — p-[13px] here, text-[15px] there, gap-[7px] somewhere else — where every value is individually defensible and the set has no rhythm at all. It is also the single most common tell of generated UI, because a model has no reason to make independently-emitted numbers agree.

## Bad — do not do this

`performance-ibelick-tailwind-defaults-bad`

```tsx
export function IbelickTailwindDefaultsBad() {
  return (
    <div className="space-y-4">
      {/* Using arbitrary values instead of Tailwind defaults */}
      <div className="p-[13px] rounded-[5px] bg-muted">
        <p className="text-[17px] leading-[1.3] mb-[7px]">Card Title</p>
        <p className="text-[13px] text-muted-foreground">
          This card uses arbitrary pixel values that don't align to the spacing scale.
        </p>
      </div>
      <button className="px-[18px] py-[9px] bg-primary text-primary-foreground rounded-[6px] text-[15px]">
        Submit
      </button>
      <p className="text-xs text-destructive mt-4">
        Arbitrary values like p-[13px] break visual consistency
      </p>
    </div>
  );
}
```

## Good — do this

`performance-ibelick-tailwind-defaults-good`

```tsx
export function IbelickTailwindDefaultsGood() {
  return (
    <div className="space-y-4">
      {/* Using Tailwind default spacing scale */}
      <div className="p-3 rounded-md bg-muted">
        <p className="text-lg leading-snug mb-2">Card Title</p>
        <p className="text-sm text-muted-foreground">
          This card uses Tailwind's default spacing scale for consistent rhythm.
        </p>
      </div>
      <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm">
        Submit
      </button>
      <p className="text-xs text-success mt-4">
        Default scale (p-3, px-4, py-2) ensures visual consistency
      </p>
    </div>
  );
}
```

## References

- [ibelick — baseline-ui SKILL.md](https://github.com/ibelick/ui-skills/blob/main/skills/baseline-ui/SKILL.md)
- [Tailwind Spacing Scale](https://tailwindcss.com/docs/theme)