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-blu...