Lesson 01 / 8·7 minFree

What Is Tailwind CSS?

Why utility-first CSS beats writing custom stylesheets for most projects

Tailwind CSS is a set of tiny, single-purpose CSS classes — called utilities — that you combine directly in your HTML. Instead of writing `.card { padding: 16px; background: white; border-radius: 8px; }` in a CSS file and applying `.card` to an element, you write `p-4 bg-white rounded-lg` directly on the element.

Traditional CSS vs Tailwind

Building a button — two approaches

<!-- Traditional CSS -->
<!-- In style.css: -->
.btn-primary {
  padding: 8px 16px;
  background-color: #3B82F6;
  color: white;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}
<!-- In HTML: -->
<button class="btn-primary">Save changes</button>

<!-- Tailwind -->
<button class="px-4 py-2 bg-blue-500 text-white rounded font-semibold text-sm">
  Save changes
</button>

Why developers prefer Tailwind

No CSS file to maintain — Styles live next to the HTML — you never switch files to change a colour or spacing
No class naming fatigue — You don't spend mental energy inventing names like .card-inner-header-icon-wrapper
Consistent design system — The default scale (spacing, colours, typography) enforces consistency across the whole project
No CSS bloat — Tailwind only ships the classes you actually use — the output CSS is tiny

The tradeoff

Tailwind HTML looks cluttered at first. `class="flex items-center gap-4 p-4 bg-white rounded-lg border border-gray-200 hover:border-blue-500 transition-colors"` takes getting used to. Most developers find they stop noticing the noise within a week — and the productivity gain more than compensates.

Spacing, Sizing, and the Scale