What is Tailwind CSS

Tailwind CSS is a utility-first framework where every class does exactly one thing. Instead of writing .card { padding: 16px; border-radius: 8px; }, you compose styles directly in HTML using classes like p-4 rounded-lg.

Traditional frameworks give you prebuilt components. Tailwind gives you low-level primitives. You never fight overrides, specificity, or naming conventions.

Utility-first in practice

Each class maps to a single CSS declaration: p-4 equals padding 1rem, text-blue-500 sets a blue color, flex sets display flex.

<!-- Traditional -->
<div class="card">Hello</div>

<!-- Tailwind -->
<div class="bg-white p-6 rounded-xl shadow-md text-gray-800">
  Hello
</div>

The Tailwind class string reads like a spec sheet. Any developer can decode what the element looks like without opening a CSS file.

Why not just use inline styles

Inline styles cannot handle hover states, media queries, or pseudo-elements. Tailwind classes can. hover:bg-blue-600 or md:flex-row are impossible with inline styles. Tailwind gives you inline-style ergonomics with CSS full power.