TopolearnUnderstanding the trade-offs explains why Tailwind code looks the way it does and when it pays off.
In traditional CSS you invent a class name, .profile-card, and write its rules in a stylesheet. In Tailwind you compose utility classes, each doing one thing, right in the markup:
<div class="mx-auto max-w-sm rounded-xl bg-white p-6 shadow-lg">p-6 is padding, rounded-xl is border radius, shadow-lg is a box shadow. Every utility maps to one or a few CSS declarations from a shared design scale.
Why people like it:
- No naming and no context switching between files.
- Styles are local: changing a class affects only that element, so there's no fear of breaking a distant page.
- CSS stops growing, because the same utilities are reused everywhere and unused ones are never generated.
- Design constraints: spacing, colours and font sizes come from one scale, which keeps the UI consistent.
The common objections have answers. Long class lists are handled by extracting components in your framework (a Card component, a template partial), not by writing CSS. It's not inline styles: utilities support hover, focus, responsive and dark variants, which inline styles can't.
Preflight, Tailwind's base layer, resets browser defaults: headings and paragraphs lose their margins and font sizes, and lists lose bullets. That's intentional, so every visual style is explicit; add utilities, or style rich text with the typography plugin.
Example
<!-- A complete card, no custom CSS -->
<div class="mx-auto flex max-w-sm items-center gap-4 rounded-xl bg-white p-6 shadow-lg">
<img class="size-12 shrink-0 rounded-full" src="/ada.jpg" alt="Ada Lovelace">
<div>
<p class="text-xl font-medium text-black">Ada Lovelace</p>
<p class="text-gray-500">Wrote the first program</p>
</div>
</div>
<!-- Equivalent CSS for just two of those classes:
.p-6 { padding: calc(var(--spacing) * 6); } -> 1.5rem
.gap-4 { gap: calc(var(--spacing) * 4); } -> 1rem -->Remember
- Each utility does one thing from a shared design scale
- Reuse through components, not custom class names
- Preflight removes browser default styles on purpose
Watch out for
- Wondering why h1 and ul look unstyled: Preflight resets them; add utilities.