What Tailwind CSS Is

Tailwind is a utility-first CSS framework — compose designs from small, single-purpose classes instead of writing custom CSS.

4 min read Level 1/5 #tailwind#intro#overview

What you'll learn

Understand the utility-first idea
See where Tailwind fits vs Bootstrap, CSS-in-JS, and vanilla CSS
Know what Tailwind v4 changed

Tailwind CSS is a utility-first framework: instead of writing CSS rules in a separate file, you build designs by combining tiny, single-purpose classes directly in your markup.

Utility-First in One Line

A whole layout decision lives right on the element:

<div class="flex items-center gap-4 p-6 rounded-lg shadow-sm">
  <img class="size-12 rounded-full" src="/avatar.jpg" alt="" />
  <p class="font-semibold text-gray-900">Ada Lovelace</p>
</div>

No .card class to invent, no separate stylesheet to switch to, and no guessing what .profile-wrapper does six months later. You read the styles where you read the structure.

How It Compares

Vanilla CSS — full control, but you name everything and accumulate dead styles nobody dares delete.
Bootstrap — ships pre-designed components; you fight overrides when your design differs. Tailwind ships primitives, so any design is reachable.
CSS-in-JS — solves scoping with a runtime cost. Tailwind has zero runtime; it is just CSS.

Tailwind generates only the classes you actually use, so production CSS stays tiny (often under 10 KB) no matter how big the project grows.

What Tailwind v4 Changed

Version 4 is a near-total rewrite:

Oxide engine — a Rust + Lightning CSS core that is dramatically faster.
CSS-first config — customization happens in CSS with @theme, not a tailwind.config.js.
OKLCH colors — a wider, more perceptually even default palette.
Container queries built in — @container and @sm: need no plugin.

Tailwind powers production UIs at GitHub, OpenAI, Shopify Hydrogen, and thousands more — so the mindset you learn here transfers everywhere.

Installing Tailwind v4 →