Best Practices and Common Mistakes

Do

• Write class names in full so Tailwind can find them. Map props to complete strings: const colors = { red: "bg-red-100 text-red-700", green: "bg-green-100 text-green-700" }.
• Extract components for repeated UI; keep page templates short.
• Use the scale and your theme tokens (p-4, text-brand-700) instead of many arbitrary values.
• Sort classes consistently with the official Prettier plugin (prettier-plugin-tailwindcss).
• Install the Tailwind CSS IntelliSense editor extension for autocomplete and previews.
• Design mobile first; add sm:/md: for larger screens.

Don't

• Build class names from fragments (bg-${color}-500).
• Fight Tailwind with !important everywhere; if you need it, use the ! suffix sparingly (bg-red-500!).
• Recreate Bootstrap with @apply for every element.
• Remove focus outlines without a visible replacement.
• Ship the Play CDN to production; use the Vite plugin, PostCSS or CLI.

Safelisting dynamic classes

If class names truly come from a database, list them so Tailwind generates them:

@source inline("bg-red-100 bg-green-100 bg-amber-100");

A tidy example

<div class="flex flex-wrap gap-2 p-6">
  <span class="rounded-full bg-red-100 px-3 py-1 text-sm font-medium text-red-700">Overdue</span>
  <span class="rounded-full bg-amber-100 px-3 py-1 text-sm font-medium text-amber-700">Pending</span>
  <span class="rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-700">Paid</span>
</div>