Tailwind’s utility-first approach — styling directly in markup with small, single-purpose classes — is genuinely divisive, and understanding the actual trade-off matters more than picking a side in the debate.
<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md"> <h3 class="text-lg font-semibold text-gray-900">Order #1234</h3> <span class="px-2 py-1 text-sm bg-green-100 text-green-800 rounded-full">Paid</span> </div>
The Real Trade-off
- Tailwind wins on speed of building UI without context-switching between files, and enforced design-system consistency via its config.
- Hand-written CSS wins on markup readability (no wall of utility classes) and not being tied to a specific tool’s conventions.
Tailwind’s @apply directive and component extraction address the “wall of classes” complaint for repeated patterns — most teams that adopt Tailwind well end up using a hybrid: utility classes for one-offs, extracted components for anything repeated more than twice.