A Tailwind Project Checklist

Questions to ask

Are class names written in full (no dynamic fragments)? Are brand tokens defined in @theme instead of repeated arbitrary values? Is the layout mobile-first and tested at each breakpoint? Do interactive elements have hover, focus-visible and disabled styles? Is dark mode complete and free of contrast problems? Are repeated patterns extracted into components? Are classes sorted, and conflicts handled with a cn() helper or clear props?

The checklist

Use it in reviews.

[ ] complete class names only (no `bg-${color}-500`)
[ ] tokens in @theme; few repeated arbitrary values
[ ] mobile-first styles; checked at sm/md/lg/xl
[ ] focus-visible styles on every interactive element
[ ] disabled, invalid and loading states styled
[ ] dark mode colours paired and contrast-checked
[ ] sr-only labels for icon-only controls
[ ] repeated UI extracted into components
[ ] Prettier class sorting + IntelliSense in the team setup
[ ] conflicts handled (props or tailwind-merge)

Build a small style guide page

A page showing buttons, forms and cards in all states catches inconsistencies quickly.

Quick check: Which item belongs on a Tailwind review checklist?

• Remove all focus outlines
• Use dynamic class name fragments
• Every interactive element has a visible focus style
• Repeat arbitrary hex colours everywhere