The opposite approach to CSS frameworks
The dominant CSS frameworks in 2017 — Bootstrap, Foundation, Bulma — share the same philosophy: they provide predefined components (buttons, cards, navbars, forms) with ready-made styles. The developer assembles the interface by selecting components and customising them where needed. The result is immediate productivity, but also interfaces that tend to look alike and growing complexity when deviating from the default aesthetics.
Tailwind CSS, created by Adam Wathan, proposes a radically different approach: instead of ready-made components, it provides a collection of atomic utility classes — each responsible for a single CSS property. There are no .btn or .card components: there are classes like flex, p-4, text-lg, bg-blue-500, rounded-md, composed directly in the HTML markup.
Composition in markup
With Tailwind, an element’s styling is readable directly in the template. A button is not <button class="btn btn-primary"> but <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">. The difference is philosophical: the first approach hides styling decisions behind an abstraction, the second makes them explicit.
Critics argue that HTML becomes verbose and that structure and presentation are mixed. Proponents respond that co-locating style and markup eliminates the “dead CSS” problem — classes defined in stylesheets that no one knows whether they are still used — and makes every component self-contained.
Configuration and design system
The tailwind.config.js configuration file defines the design system: colour palettes, spacing, responsive breakpoints, typography, shadows. Every value used in utility classes derives from the configuration, ensuring visual consistency. Changing the primary colour or the spacing scale requires a single change to the configuration file, not a search across all stylesheets.
Responsive variants (md:flex, lg:text-xl) and state variants (hover:bg-blue-700, focus:ring-2) apply conditional styles without manual media queries.
PurgeCSS and production
The framework generates thousands of utility classes, but in production only a small percentage is actually used. PurgeCSS analyses the markup, identifies the classes actually in use and removes everything else from the final CSS. The result is a stylesheet of just a few kilobytes. Tailwind CSS is released under the MIT licence.
Link: tailwindcss.com