I'm struggling to understand the advantage of tailwind shorthand. Why would we use [:bg :gray-100] over {:background "gray"} (or what ever). Why make users learn two sets of words? My long standing impression is that tailwind's success was making styles atomic to at least a key value binding. But with a css in cljs solution you could store your css as hashmaps and get even more granularity.

My understanding, based on very thin evidence, is that css classes, even atomic once (e.g color-blue { color: blue;} are faster then inline styles, but not by an amount that matters. Is tailwind using classes over inline styles because of that?

Tailwind provides more consistent and composable primitives - i.e., it reduces freedom but still gives you relatively low-level control. In your example, tw blue is not just blue - but harmonized color schema blue. From my experience, it reduces CSS 3 times and makes it more consistent. In macrocss, you can mix tw rules with just garden styles or add your tw-like rules easily.

err. i thought this was picking up a different conversation. ignore what i said.

i don't know what you mean by "harmonized color schema blue." and i'm still not seeing how tailwind is more consistent or composable then clojure primitives. Maybe it's not clear what i'm suggesting as an alternative? That if you ignore the perf story you can just use clojure datastructures to manage most of your css. (outside a subset of css). I think tailwind can make a codebase more consistant, but a well defined style guide can go even further. I'm having no issue re-using styles on my personal projects where i want to. Nothing stops me from reusing them (def styles {...}) (def otherstyles {...}) (merge styles otherstyles)

I tried my best to write my thoughts down https://drewverlee.github.io/posts-output/2021-8-26-css-optimizations. I think it's a nefariously hard problem rooted in lack of functionality in css. Conflated by how browsers choose to interpenetrate css.