What Is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS rules like .card { padding: 1rem; border-radius: 0.5rem; }, you compose a design directly in your markup using small, single-purpose classes that each do one thing.

<div class="rounded-lg bg-white p-4 shadow-md">
  <h2 class="text-lg font-bold text-slate-800">Order confirmed</h2>
  <p class="mt-1 text-sm text-slate-500">We'll email you a receipt shortly.</p>
</div>

Here, rounded-lg sets a border radius, p-4 sets padding, shadow-md adds a drop shadow, mt-1 adds margin-top — each class maps to a small, predictable set of CSS properties. There's no separate stylesheet to jump to and no .card class to name.

Why not just write CSS?

If you know CSS, utility classes might look like a step backward — you're still choosing the same properties and values, just as class names instead of declarations. The difference shows up at scale:

• You stop naming things. Every custom CSS class needs a name (.card, .card__title, .card--featured...), and naming is genuinely hard to do consistently across a large project. Utility classes skip that entirely.
• Your CSS stops growing. A traditional stylesheet grows forever as a project grows — every new component adds new rules that someone eventually has to hunt down and remove when they're no longer used. With utilities, the same p-4 or flex class gets reused everywhere, so the actual amount of CSS shipped stays small and mostly stops growing.
• Styles and markup stay in one place. To understand how something looks, you read the element itself, not a class name that sends you to a separate file that might have been edited by someone else, for a different reason, months ago.

It's still "real" CSS

Utility classes aren't a new styling language — p-4 simply outputs padding: 1rem, and flex outputs display: flex. Tailwind's build step scans your project for class names you've actually used and generates exactly the CSS needed for them, nothing more. If you never use italic anywhere in your project, no CSS for italic ships to the browser.

<button class="rounded bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700">
  Save changes
</button>

Read that line and you already know the button is blue, has rounded corners, padding, white medium-weight text, and darkens slightly on hover — without opening a second file.

What this course covers

This course assumes you're comfortable with HTML and CSS fundamentals already — you know what padding, flexbox, and hover mean in plain CSS. What's new here is Tailwind's vocabulary for expressing those same concepts as classes, plus the tooling and conventions (responsive prefixes, state variants, theme customization) that make utility-first CSS practical on a real project rather than an unreadable wall of class names.