I have for many years! And this block needs media queries and stuff for active and other states.
That line you quote is
.primary>[data-slot=icon] { margin-left: -0.5rem; margin-right: -0.5rem: }
https://nuejs.org/blog/tailwind-vs-semantic-css/
The bloat takes several forms
1. The amount of source HTML/CSS needed
2. The code complexity (class & DIV/SPAN "soup")
3. The weight of CSS & JS on the resulting website
Happy to write a comparison to Calypso, which is on a whole new level. Betting 10-20x bloat differences to semantic CSS.
I do think it would be great to make a follow-up post on Calypso, even if only on the button. Looking forward to it.