Tailwind CSS | What It Is & How I Use It

Tailwind CSS is a utility-first CSS framework that provides low-level, composable CSS classes for building custom designs directly in your markup. Instead of writing custom CSS or overriding pre-built component styles, you apply small, single-purpose classes like flex, p-4, bg-blue-500, and rounded-lg to build any design. For custom web application development, Tailwind is my default styling approach. It eliminates the back-and-forth between HTML and CSS files, makes responsive design trivially easy with breakpoint prefixes, and produces remarkably consistent interfaces because you work within a constrained design system of spacing, colors, and typography scales. The build step purges unused classes, so production CSS bundles are typically under 10KB. Combined with component-based frameworks like React, Tailwind's utility classes stay co-located with the components they style, making it effortless to understand and modify any piece of the UI.

The Backstory

Tailwind CSS was created by Adam Wathan and Steve Schoger. Wathan was a Laravel developer and educator who had been writing about functional CSS patterns on his blog as early as 2017. He and Schoger, a designer, had collaborated on a UI design book called Refactoring UI. The first version of Tailwind was released in November 2017 as an experiment in utility-first CSS. It was initially met with strong skepticism, the idea of putting dozens of classes in your HTML felt like regression to many developers who had spent years advocating for semantic CSS. Wathan funded development through course sales and consulting until Tailwind Labs was established, eventually raising funding to build the framework full-time.

Under the Hood

Tailwind CSS v1.0 was almost never released. Adam Wathan nearly abandoned the project multiple times during development because the negative reaction from the CSS community was so intense. Prominent CSS developers wrote blog posts calling utility-first CSS an anti-pattern. What saved the project was an unexpected surge of adoption from the Laravel and React communities, where developers cared less about CSS orthodoxy and more about shipping quickly. Tailwind's documentation site became a case study in great developer documentation, and Wathan has said the docs were as important to adoption as the framework itself.