> what's the benefit of Tailwind over style attributes on HTML tags

For example, you can't specify hover, focus etc. style attributes. You can't specify screen sizes either. Plus there are few Tailwind classes that cover several attributes.

Plus many of those styles are just unwieldy. For example, `drop-shadow` is `filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));`

This. The secret super power in Tailwind is editing the tailwind.config.js and forcing standards. Then you have have something like only having four padding options per your style guide and them defined in one specific place. In style tags you could use a CSS var for this as well but you better hope you used it everywhere. Plus, that becomes super wordy: 'padding-left: var(--padding-1)' vs 'pl-1'

Isn't this ("forcing standards") the usual property of using CSS classes (responsibly)?

Are the folks that hate single char variable names here to chime in?

Oh I'm one of them..but incredibly clear shorthand is helpful for these kinds of cases. Writing code like `const a = 5; b = a/2; c = a/b` is pretty nonsensical. but in tailwind these things have meanings: p = padding, m = margin, then you have left, right top, bottom, (l r t b) and then X and Y. (so pl- mx- pb-) That is all of them. At the rate you use them it is pretty clear I guess.