I’m a big fan of what is sometimes called atomic CSS — basically using a whole bunch of utility classes. I’ve previously written about why I like it. The most popular open source project taking this approach is Tailwind — a library of CSS utility classes.

Tailwind is a library of CSS utility classes. It has become pretty popular, reaching nearly 10,000 stars on GitHub and over 12,000 followers on Twitter. It also boasts an active Discord community. The library recently shipped its version 1 release.

Tailwind attempts to provide everything but the kitchen sink. Offering some well-chosen styles is one reason Tailwind is popular.

For developers uneasy with or just uninterested in design, nice default styles are useful. For me though, they’re unneeded. Pretty colors aren’t the only example of Tailwind going overboard with predefined styles.

The Tailwind documentation acknowledges that its larger than all other CSS frameworks:

“Using the default configuration, Tailwind CSS comes in at 36.4kb minified and gzipped.

“By comparison, [with other popular frameworks] Tailwind seems really heavy (over 1.5x larger than Bootstrap!) The default configuration file provides a very generous set of colors, breakpoints, sizes, margins, etc. by design. When you pull Tailwind down to prototype something, create a CodePen demo, or just try out the workflow, we want the experience to be as enjoyable and fluid as possible. We don’t want you to have to go and write new CSS because we didn’t provide enough padding helpers out of the box, or because you wanted to use an orange color scheme for your demo and we only gave you blue. This comes with a trade-off though: The default Tailwind build is significantly heavier than it would be on a real project with a purpose-built configuration file.”

Tailwind isn’t doing anything overly complicated — it’s just generating some CSS classes. Arguably, it’s easier to do that by hand rather than using Javascript configuration files.

Example Tailwind documentation:

“The theme.colors property allows you to override Tailwind’s default color palette.”

// tailwind.config.js module.exports = { theme: { colors: { indigo: '#5c6ac4', blue: '#007ace', red: '#de3618', } } }

By default, there are a lot of classes in Tailwind — most of which you’ll never need. Indeed, the sheer number of classes feels slightly overwhelming. I wanted to avoid unnecessary bloat and only add CSS that was necessary for my particular project.

Tailwind is highly configurable. However, I decided I’d rather start with something minimal and simple and write extra classes as I go. Ultimately, I didn’t want to spend time in a configuration file modifying default values. I’d rather just write some CSS.

I’m not aware of many large companies using Tailwind — Algolia is one exception. There are, however, plenty of companies adopting this atomic approach to CSS and defining their own custom utility class libraries.

Which companies are using Atomic CSS?

Kickstarter, Pizza Hut, Twitch, Heroku, Meetup, Mapbox, Buzzfeed, Stripe, TED, Stack Overflow and Github…

One particularly nice example is Stack Overflow. Their design system, called Stacks, was built with the rationale that “we should be writing as little CSS as possible”. The Stacks website claims that its utility classes can be “chained together to create just about any layout without writing a single line of new CSS”. They can also be used as “modifiers of pre-existing components.”

Rolling your own

Tailwind imagines that you can do styling by applying the pre-defined styles to HTML without needing to actually write any CSS. However, sometimes there are too many options to abstract them all into classes ahead-of-time without any knowledge of the context in which they will be used in — i.e. the particularities of your unique design. This is particularly the case with CSS grid, which offers an incredible amount of flexibility. Ultimately, oftentimes you do need to write your own CSS. More than an NPM install, I realised that what I needed was a defined approach to writing styles. My own open source library doesn’t attempt to define all the classes you could possibly need. It’s half a predefined CSS utility library and half a set of guidelines for authoring CSS.

Why Atomic CSS?

The case for atomic CSS has been made eloquently before by Adam Wathan and many others. I’ve written about it myself in CSS Tricks. One common objection is the question of “how will I remember all those class names?” So long as you can guess the first letter of the utility you are looking for, tooling can do the rest.

VSCode autocomplete

Chrome devtools autocomplete

If you’re still unsure about utility classes, I’ll leave you with this, from designer Mark Dalgleish.