Tailwind Best Practices

Tailwind is easy to start and easy to make messy. These habits keep large codebases readable and consistent.

Order Classes Consistently

Pick a stable order so scanning is predictable. A common one:

1. Layout — flex, grid, block
2. Positioning — relative, absolute, z-10
3. Spacing — p-4, m-2, gap-4
4. Size — w-full, h-10, max-w-md
5. Typography — text-lg, font-bold, leading-tight
6. Color — bg-white, text-gray-900, border-gray-200
7. Effects — rounded-lg, shadow, opacity-50
8. States — hover:, focus:, dark:
9. Responsive — sm:, md:, lg:

Prettier’s Tailwind plugin enforces this automatically.

Build a Small Design System

Decide a few tokens up front and stick to them:

• One spacing rhythm (p-2, p-4, p-8).
• A limited palette with semantic names.
• Two or three radius and shadow values.

Consistency beats novelty in every class list.

Components Over Repetition

If a block of classes appears three times, extract it. Repeated long strings are a maintenance trap.

Accessibility Is Not Optional

• Contrast — Test text against its background in both themes.
• Focus states — Always visible, never removed.
• Tap targets — At least 44×44px.
• Reduced motion — Respect motion-reduce:.

<div class="transition-transform motion-reduce:transition-none">...</div>

Performance

• Unused utilities are purged at build time, so shipping is lean.
• Keep dynamic class names as full strings so they survive scanning.
• Do not fight the scanner with concatenation.

Readability

For very long lists, break across lines and group logically:

<button
  class="
    inline-flex items-center gap-2
    rounded-lg bg-blue-600 px-4 py-2
    font-medium text-white
    hover:bg-blue-700 focus:ring-2 focus:ring-blue-400
  "
>

Best Practices

1. Enforce class order — Prettier plugin.
2. Tokenize early — Fewer arbitrary values.
3. Extract components — Reuse markup, not strings.
4. Design accessible by default.
5. Keep class lists readable — Group and wrap.

Common Mistakes

1. Inconsistent spacing — Every value under the sun.
2. !important as a strategy — Fix specificity instead.
3. Removing focus rings — Breaks keyboard users.
4. Dynamic class strings — Silently dropped by the scanner.
5. A thousand arbitrary values — You built a stylesheet, badly.