withastro
`@astrojs/tailwind` using classes versus `@apply`
Not sure exactly where it would go in the tailwind integration guide, but one thing I see a lot on https://web.dev/measure/ is that a ton of unused css ships when using tailwind classes and importing the global css file in my layout.
When using the @apply syntax in component <style> tags, it does not get added to the global css page which I find really nice for performance. I'm wondering if folks think it is worth including or not
Thanks for this @kylebutts! Let's ask @delucis what he thinks about this. If it's a pattern you have found helpful, then maybe others would too!
I don't immediately see the best place for this, since we don't currently show an example of Tailwind with a style tag anywhere. I would think the Tailwind integration guide is the page that makes the most sense, maybe formulated as something for Troubleshooting? As in, "If you're shipping too much unused CSS when... try..." kind of guidance?
it is not precisely unused CSS but tailwind generates a single CSS file for the entire application that usually gets cached after the first load. I believe this is how tailwind works by default without any CSS splitting.
It is usually not a problem due to the small size after purging and reusability of CSS atomic classes.
My guess would be that over time, using @apply would lead to bigger CSS files because it will duplicate the CSS required for each utility.
If I understand correctly, the benefit you're seeing is because Astro knows when to include the CSS in its <style> tags, so can break up the CSS output files, whereas the Tailwind file is a single global one. I can imagine that for the correct use case, your technique could make sense but it requires more careful work by the user to avoid utility classes so I'm not sure about recommending it.
As @kevinzunigacuellar mentioned, in general caching the single CSS file is a good thing. The web.dev metric is more warning you to make sure you don't have completely irrelevant CSS but with Tailwind you have only relevant CSS by definition, even if it's relevant to a different page.
