Tailwind CSS Explained: Styling Without Leaving Your HTML

Introduction

Traditional CSS means writing a class in a stylesheet, then remembering its name in your HTML, then hunting through the stylesheet when something looks wrong. Tailwind CSS, created by Adam Wathan and released in 2017, flips that: instead of writing custom classes, you compose small utility classes directly in your markup — flex, pt-4, text-center, bg-blue-500 — and the framework generates only the CSS you actually used.

How utility classes work

A Tailwind class does exactly one thing, and its name says what:

<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow">
  <h2 class="text-xl font-bold text-gray-900">Dashboard</h2>
  <button class="px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700">
    Save
  </button>
</div>

No stylesheet to open, no class names to invent, no guessing what .card-header does. Variants handle states and screen sizes in the same place: hover:bg-blue-700 changes colour on hover, md:flex-row changes layout on medium screens and up. The build step then scans your files and ships only the utilities you used, so the final CSS file stays small even though the framework offers thousands of classes.

Why it caught on — and the honest trade

Tailwind caught on because it removes the two slowest parts of styling: naming things and switching files. Styling happens where the markup lives, and designs stay consistent because everyone picks from the same spacing, colour, and type scale instead of inventing values. The trade is visible in the example above: long class lists that some developers find ugly, HTML that gets noisy on complex components, and a learning curve of memorising utility names before it feels fast. The usual fix is extracting repeated patterns into components (in React, Vue, or Svelte — all covered earlier) rather than fighting the class lists by hand.

Takeaway

Tailwind CSS trades custom stylesheets for utility classes in your markup, generates only the CSS you use, and keeps design decisions consistent through a shared scale. If your stylesheets keep growing into a mess nobody wants to touch, this is the framework that made a generation of developers stop writing CSS the old way.

Originally published at https://practicaldevblog.blogspot.com/2026/10/tailwind-css-explained-styling-without.html