I have no experience with Atomic CSS, but I think an important part of Tailwind is that it simultaneously serves as a design system. By having relatively limited options for, let's say, font sizes, you don't spend a lot of time making micro adjustments. The author of Tailwind also co-authored the Refactoring UI book that pretty much explains this philosophy that the framework was built to support. Of course, in the end you can add as much custom CSS as you want, written as utilities or not, but the point is to quickly get to a reasonable design.

You have to strike a balance between reusability + a central base of the design/theme which defines the consistent look and feel on one hand with the composable LEGO style building blocks which Basscss https://basscss.com/ and Tachyons http://tachyons.io/ and other similar functional css frameworks made popular.

The problem with the latter is you’ve coupled the styles to names embedded in the HTML which means a whole lot of grep and replace when things change.

Taking that further with actual custom values being applied in the class names in the view the way Atomic sounds like it’s taking that idea too far. Those values should be constrained the way it’s done in https://rebassjs.org/ where customization of base values is handled with CSS in JS.

The removal of unused classes can be achieved using tools like PurgeCSS https://www.purgecss.com/

Ultimately I’ve found Tailwind to have the best balance between a composable utility class base approach, with consistent base values, and a mature and good looking parent framework. Otherwise I’d go with one of the smaller utility kits mentioned above for simple projects.

We use PurgeCSS[0] as part of our build process to remove all of the Tailwind classes that weren't used. That gives our developers the freedom to work/experiment with everything Tailwind has to offer while spitting out super tiny and optimized CSS files.

I just checked one of our more recent projects and the resulting CSS is 2.4KB, about half of which is actually an SVG that's used in a background.

[0] https://www.purgecss.com/

shameless plug: https://github.com/leeoniya/dropcss

faster and more thorough than PurgeCSS (and all others).

specifically for handling TailWind's weird classnames:

https://github.com/leeoniya/dropcss#special--escaped-sequenc...

This is what I use to remove unused CSS from Tailwind, works great!

https://tailwindcss.com/docs/controlling-file-size/