Haha, if that ain’t a mood then I dunno what is… 
I can’t see something like Tailwind working outside a world where “view components” are the norm.
But then… why not just use inline styles on your components?
cjbottaro
LostKobrakai
Try getting responsive behaviour out of inline styles or focus/hover/… styles. Tailwind often maps to a single style, but there are also quite a few abstractions on top, where a single utility class sets multiple css properties. It‘s for sure a shallow level of abstraction, but I found this very useful and preferable to heavier, but usually less flexible/composable, abstraction attempts.
0
dmitriid
why not just use inline styles on your components?
Tailwind provides:
-
a working set of consistent design tokens out of the box: anything from standardised sizes to margins to color progressions
I’ve tried to figure out how to do a design system for ages, but I’m not a designer. Many existing design systems and frameworks usually box you into an inflexible set of constraints. Tailwind is flexible, but still gives you consistency (especially coupled with their UI examples) -
convenient shortcuts to properties and combinations of properties that you might not remember off the top of your head
As someone mentioned above, a simpleshadow-mdis actually0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);, and “ain’t no one got time for that”
You can replace these with CSS variables, but then you have properties liketext-smwhich isfont-size: 0.875rem; line-height: 1.25rem;, so you have to remember to always use them together. I know, I once tried to use CSS variables only, and was lifting their definitions directly from Tailwind. Then I gave up and just went with Tailwind.
(Side note: this was a big missed opportunity for CSS vars: to be able to include several properties in one variable) -
utility classes are descriptive. Compare
shadow-mdto the jumble of characters it resolves to -
less work for the browser to do: it needs to parse classes and apply them, not create a separate combination of styles for each document
-
there’s also a nice thread by Dan Abramov on Tailwind that touches a bit on inline styles, too: https://twitter.com/dan_abramov/status/1452324924421550080
0
LostKobrakai
It’s been way to long (like 8-10 years ago) to link to sources, but I seem to remember someone benchmarking a single class per css property and that actually turned out to be really performant with browsers (at least the time) – iirc because it matched well to how browsers map styles to elements. Being done for just the benchmark it lacked the necessary tooling and the “terseness” of tailwind class names (it used written out css property names turned to classes) to be useful, but it’s still interesting to see how such “early” experiments map to something becoming popular years later.
1