class="[&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-stone-300 [&::-webkit-progress-value]:bg-stone-400 [&::-moz-progress-bar]:bg-stone-400"
Personally I think the popular trends have overcorrected from CSS; soon we'll realize that the amount of complexity above is screaming to be packaged up and named something, rather than being crammed into the markup alongside more sensible things like text-black.
To your final point, I completely agree that it should be packaged up — I'd package this up into a component (react, partial etc.) which would encapsulate the styles via Tailwind, HTML and logic.
I like Tailwind as a way to more closely tie my markup with styling. I'll package it all up into a component anyway, but Tailwind keeps it all in 1 spot (the markup) rather than spread across multiple files.
I don't use them all, but I know Vue and Svelte can. React is really popular, so I assume it's got a way.
What other elements should I add?
Not really an element, but `popover` attributes for elements, maybe?
Recently I've been using fieldset+legend to great effect for titled input forms. In fact I've used it almost exclusively in my last contract.
Some other ones that too few people use: progress, cite, sub/sup, datalist (very useful), and search (also very useful as a busy indicator when used with no percentage).
Thus even if supported, they don't do those cool UI/UX workflows sold to clients, and that is how we still end with a div/css/javascript soup, or back to Flash like approaches, now that WebGL/WebGPU/WebAssembly has brought that tooling back into the Web.