In practice it has a much smaller css payload cost than standard hand-written css classes.
> 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.
Yes! I was talking about the fcss framework and syntax proposed by the parent poster ( which doesn't have a "compilation" step for reducing the amount of unnecessary css as tailwind does )
> 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...