Add tailwind css or another utility class css framework and you can do the whole frontend in html :)

Yes, but you shouldn't use it as a simple drop-in. The minified version via CDN is like 1.7 MB ... at least they mention you should not use it in the docs and instead configure it to your needs.

Indeed, using tailwind without some build pipeline is not recommended. You'd use something like PurgeCSS to remove all unused css classes. Which admittedly kind of defeats the whole idea of keeping it simple.

tailwind is 1.7MB of CSS? ....whyy?

It defines css classes for most css properties. Their website [1] explains why you might want that pretty well. Regarding file size, the idea is that you use something like PurgeCSS in your build pipeline, which removes all unused css classes. A bit like tree shaking for css.

[1] https://tailwind.css

Additionally so you can open up the developer tools, and just slap on classes on divs and experiment a bit quicker.

Towards the end you can put it all together and trim it down, not sure if there's tooling that auto joins some of the CSS as necessary though.

https://tailwindcss.com is the link :D

id imagine that you get a lot of rules when you have a whole bunch of different "margin-top-<x>". the idea is probably to rely on some CSS tree-shaking/"dead CSS elimination" tool to only keep the ones you need

exactly