Skip to main content

Search rules

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

performance@Ibelick

Tailwind Defaults First

MUST

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

Bad

Good

Why it matters

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.

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.