# Use size-* Utility

**SHOULD** · **ID:** `layout-ibelick-size-utility` · **Category:** layout
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-ibelick-size-utility

> SHOULD: Use size-* for square elements instead of separate w-* and h-* classes. Reduces class count and communicates intent (this element is square).

Use size-* instead of separate w-* and h-* for square elements

w-8 h-8 states two independent facts that happen to agree. size-8 states one fact: this is square. The difference shows up on edit — resize a w-8 h-8 icon and it is trivially easy to change one and not the other, producing a 32x24 "square" that nobody notices until it is next to a real one. It is a SHOULD, and it applies only where squareness is the intent (icons, avatars, icon buttons); an element that is coincidentally square is still correctly written as w-* + h-*.

## Bad — do not do this

`layout-ibelick-size-utility-bad`

```tsx
export function IbelickSizeUtilityBad() {
  return (
    <div className="space-y-4">
      {/* Using separate w-* and h-* for square elements */}
      <div className="flex items-center gap-4">
        <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs">
          A
        </div>
        <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-xs">
          B
        </div>
        <div className="w-12 h-12 rounded-full bg-destructive flex items-center justify-center text-white text-sm">
          C
        </div>
      </div>
      <div className="flex items-center gap-4">
        <button className="w-8 h-8 rounded-md bg-muted flex items-center justify-center">
          <span className="text-sm">×</span>
        </button>
        <button className="w-10 h-10 rounded-md bg-muted flex items-center justify-center">
          <span className="text-sm">+</span>
        </button>
      </div>
      <p className="text-xs text-destructive">
        w-8 h-8 is verbose and hides the "square" intent
      </p>
    </div>
  );
}
```

## Good — do this

`layout-ibelick-size-utility-good`

```tsx
export function IbelickSizeUtilityGood() {
  return (
    <div className="space-y-4">
      {/* Using size-* for square elements - clearer intent */}
      <div className="flex items-center gap-4">
        <div className="size-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-xs">
          A
        </div>
        <div className="size-10 rounded-full bg-muted flex items-center justify-center text-xs">
          B
        </div>
        <div className="size-12 rounded-full bg-destructive flex items-center justify-center text-white text-sm">
          C
        </div>
      </div>
      <div className="flex items-center gap-4">
        <button className="size-8 rounded-md bg-muted flex items-center justify-center">
          <span className="text-sm">×</span>
        </button>
        <button className="size-10 rounded-md bg-muted flex items-center justify-center">
          <span className="text-sm">+</span>
        </button>
      </div>
      <p className="text-xs text-success">
        size-8 is concise and clearly shows square intent
      </p>
    </div>
  );
}
```

## References

- [ibelick — baseline-ui SKILL.md](https://github.com/ibelick/ui-skills/blob/main/skills/baseline-ui/SKILL.md)
- [Tailwind Size Utility](https://tailwindcss.com/docs/width#setting-both-width-and-height)