Why utility-first CSS works

I was skeptical of Tailwind for a long time. "Why would I write flex items-center justify-between in my HTML when I could just write .navbar in CSS?"

Then I tried it on a real project.

What changes

• You stop context-switching between HTML and CSS files
• You stop naming things (the hardest problem in CSS)
• You stop worrying about cascade conflicts

The real benefit: constraints

Tailwind's design tokens — spacing scale, color palette, typography — force consistency. Every team member is pulling from the same set of values.

<div class="flex items-center gap-4 p-6 rounded-lg bg-card shadow-sm">
  <Avatar />
  <UserInfo />
</div>

This is readable. You can see the layout at a glance.