Writing the whole css syntax as classes is almost like using the style="" attribute, and comes with an enormous css payload cost
> Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network. - https://tailwindcss.com/docs/optimizing-for-production
What does increase is the html or react payload. But at least it's only sending what you use.
Most websites are sending all of the styling for all of the pages and states, even though the user never sees it. It takes work to optimize that away, and things go wrong often.
There are many clever macros like `space-x-4` that compile to very tricky effects. You couldn't write that in the style attribute at all. https://tailwindcss.com/docs/space#add-horizontal-space-betw...