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>

Enter fullscreen mode

Exit fullscreen mode

No stylesheet to open, no class names to invent, no guessing what .card-header does.…