Tailwind CSS is a utility-first CSS framework that lets you build designs directly in your markup. Instead of writing custom CSS classes like .card or .btn-primary, you use small, single-purpose utility classes like bg-blue-500 and text-white right in your HTML.
The utility-first approach
Traditional CSS tells you to separate concerns — HTML for structure, CSS for style. Tailwind flips that. You write your styles inline using utility classes. This sounds like a step backward, but it's actually a huge leap forward.
<!-- Traditional CSS approach -->
<button class="btn-primary">Click Me</button>
<!-- Tailwind approach -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Click Me
</button>
The Tailwind version is more verbose in the HTML, but you never have to switch files to write CSS. No more hunting for class names, no more specificity bugs, no more dead CSS you're afraid to delete.
How Tailwind works
Tailwind scans your HTML files at build time and generates only the CSS you actually use. If you use bg-blue-500 in your code, Tailwind includes that one class. If you don't use bg-red-500, it's not in your final CSS. The result is a tiny stylesheet — usually under 10KB gzipped — no matter how big your project is.
What makes it different
Most CSS frameworks give you pre-built components like modals, dropdowns, and navbars. Tailwind gives you building blocks instead. You compose your own components from utilities, which means you have total creative control. No fighting someone else's design decisions.