Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

layout@Ibelick

Use size-* Utility

SHOULD

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

Bad

Good

Why it matters

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-*.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.