Skip to content

Like many other developers, I was almost offended by the idea of using Atomic CSS (aka »utility-first«) at first. But only a few thoughts later, I also realized the benefits of using such an approach, especially for things like spacing, typography and theming. I found Tachyons quite interesting, when it came out, but always saw it more as an inspiration, rather than being code that I’d actually would use in any of my projects.

For Tailwind CSS, this was already a different story. My only complaint here was, that the huge CSS bundles generated in dev mode and a giant node dependency for development were turning me off – though I have successfully used Tailwind in a larger project without many issues. Recent versions of Tailwind not come with a JIT-compiler, that only generated the classes which are actually used in one’s codebase. Now, the performance problems are gone and developing with Tailwind has almost become fun. I still don’t like how opinionated the framework is by providing a set of colors, drop shadows and typography out of the box and – worse – adds display: block to image tags by default (why?).

Another interesting project is Uno CSS, an on-demand atomic CSS generator, that behaves very much like Tailwind’s JIT-compiler. The cool thing is, that is can generate everything that other frameworks like Tailwind and Tachyons would provide using presets and tries to be more agnostic by itself. Unlike many other frameworks, it does not include any form of normalize.css or CSS reset, which makes it a great choice for existing projects. It also will only ever generate the classes that one really needs.

Anthony Fu (author of Uno CSS) has written a very extensive article about his approach to atomic CSS, that I can only recommend to everyone who’s into CSS architecture or at least mildly interested in Uno CSS and Tailwind:

Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
> Quoted text
Code blocks
// A simple code block
// Some PHP code
[Link text](
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!

Loading ...