Why Tailwind CSS Won

Tailwind CSS is the new ubiquitous frontend framework. It replaces a generation of sites built with Twitter Bootstrap. However, Tailwind CSS is not a UI framework itself but has become synonymous to some degree with the UI components shipped through Tailwind UI (which is a UI framework). Why did Tailwind CSS become so popular? A few hypotheses:

• No context switching from application logic. The tagline on the website reads, “Rapidly build modern websites without ever leaving your HTML.” That’s partly true, but few developers are writing HTML (instead, they are writing JSX or TSX). Switching to a CSS file to change styles is a costly context switch. Instead, developers write CSS as utility classes right in their application. This also vastly simplifies complex CSS build pipelines (which rarely worked). 

• Copy-and-pastable. Bootstrap provided templates that were easy to get started with. It became the de facto landing page for any side project or new startup. But designs weren’t copy-pastable. Doing so would require you to copy the CSS and HTML. Instead, TailwindCSS is supremely easy to copy — everyone works with the same utility classes, so you can just copy and paste a list of classes or an HTML block into your application, and it should just work.

• Fewer dependencies, smaller surface. Tailwind is tree-shaken by default and doesn’t have its own ideas of grids or flexboxes (it just defaults to the underlying CSS concepts). Compare this to the last-generation kits like Bootstrap, which had a surface that forced users to adopt JS, HTML, CSS, and CSS build systems like Saas. Tailwind is easy to coexist with other frameworks.

• Reusability. For many years, developers thought that CSS reusability came through adding class hierarchies to CSS through preprocessors like Saas and Less. The best way to write the least amount of CSS is to just compose basic styles (without defining custom ones).