For most of the web's history, styling a site meant writing CSS in a separate file, inventing class names, and switching mental contexts every few minutes. TailwindCSS upended that workflow. Since its release in 2017, it has gone from a divisive experiment to the de facto styling layer of modern web development — powering everything from indie side projects to the marketing sites of OpenAI, Shopify, and GitHub. It has also become the unofficial output format of an entirely new way of building software: vibe coding.

A Different Mental Model

Tailwind is a utility-first CSS framework. Instead of writing .card { padding: 1rem; border-radius: 0.5rem; ... } in a stylesheet somewhere, you compose those properties inline as classes: <div class="p-4 rounded-lg shadow-sm bg-white">. Critics initially dismissed this as "inline styles with extra steps." That critique missed the point. Tailwind's classes are not raw CSS — they are a constrained design system encoded as primitives.

That constraint is the magic. The spacing scale, the color palette, the typography ramp, the breakpoints — they are all enforced by the framework. You cannot accidentally type padding: 13px and quietly fragment your design. You pick from a fixed vocabulary, and consistency emerges for free.

Why Tailwind Won

Three things turned Tailwind from a curiosity into the default.

Performance. Tailwind's compiler scans your markup and emits only the classes you actually use. The final CSS bundle is often under 10 KB gzipped, regardless of project size. Compare that to the legacy pattern of importing a 200 KB Bootstrap stylesheet to use a fifth of it.

Developer experience. With editor integration, you get autocomplete, color previews, and hover documentation on every utility. The IntelliSense plugin for VS Code alone has tens of millions of installs. You stop hunting through stylesheets to find where .product-card-header-inner lives.

Customization without ejecting. Tailwind's config file lets you redefine the entire design system in one place — your brand colors, your spacing scale, your fonts — and every utility updates automatically. You're not fighting the framework; you're configuring it.

The result is a tool that feels handcrafted at small scale and stays maintainable at large scale. By the mid-2020s, Tailwind was consistently topping developer surveys for both usage and satisfaction. The argument was effectively over.

The Vibe-Coding Default

Then something interesting happened. As large language models became capable enough to generate working UI code from natural-language prompts, a new kind of developer workflow emerged. Andrej Karpathy gave it a name in early 2025: vibe coding. You describe what you want, you accept the suggestions, you barely read the diff. The vibe is the spec.

Almost every tool in this space — v0, Bolt, Lovable, Cursor, Replit Agent, Claude's own artifacts — outputs Tailwind by default. This wasn't coordinated. It was convergent evolution, and the reasons are worth understanding.

Tailwind keeps everything in one file. A model generating a component does not have to coordinate edits across a JSX file and a separate stylesheet, keep class names in sync, or remember which BEM convention the project uses. The styling lives next to the markup it styles. For an LLM, single-file output is a massive reliability boost — fewer files to track, fewer ways for the generation to drift out of sync with itself.

Naming is hard, and Tailwind doesn't require it. A surprising amount of CSS work is bikeshedding over whether something should be .btn-primary, .button--primary, or .PrimaryButton. Models trained on millions of inconsistent codebases inherit all that confusion. Tailwind sidesteps it: you don't name the styled thing, you describe it.

The class names are self-documenting. flex items-center justify-between gap-4 px-6 py-3 is legible even if you've never used Tailwind. A model can generate it confidently because the mapping from intent to syntax is direct. There is no clever indirection to invent or hallucinate.

Constraints prevent ugly output. Left to its own devices, a model will happily emit margin-top: 17px. Tailwind's preset scale nudges it toward mt-4 instead, and the result looks designed rather than improvised. The framework's opinions become guardrails for generated code that would otherwise drift toward arbitrary values.

There is a lot of training data. Tailwind has been wildly popular for years. Every model that has scraped GitHub since 2020 has seen a vast amount of high-quality Tailwind code. That fluency compounds: the more reliably models produce Tailwind, the more developers ship Tailwind, and the more the next generation of models learns from.

The upshot is a tight feedback loop. You prompt, the model emits a single file of HTML or JSX studded with utility classes, and a working interface appears in your preview pane seconds later. No build configuration, no naming debates, no context-switching. The thought becomes the thing.

Looking Ahead

Tailwind didn't set out to be the styling layer for AI-generated code. It set out to make CSS less painful for humans. But the same properties that make it pleasant to write by hand — locality, constraint, legibility — turn out to be exactly what machines need to write it well. Whatever the next era of web development looks like, it will almost certainly be styled in Tailwind.