# A Tailwind Project Checklist — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/p-check

> Review before shipping.

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

```text
[ ] 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.

**Quiz:** Which item belongs on a Tailwind review checklist?

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

*Answer:* Every interactive element has a visible focus style. Accessibility and maintainability.