Reduce bundle size for main CSS

[taverasmisael]

Astro is supposed to do this and only ship the necessary CSS for each page, but it's bundling everything on a single 404.cssfor some reason.

[taverasmisael]

It seems related to the Astro/tailwind integration. I'm sure this didn't happen before, so I'm checking the changelog to see if there's anything there.

[taverasmisael]

We are stuck with this as this is a Vite issue regarding CSS analysis and how they do code-splitting.

• https://github.com/withastro/astro/issues/5390
• https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/src/index.ts

I'll keep an eye out for withastro/astro#5390 or any related ticket coming of it and act accordingly.

[taverasmisael]

I had UnoCSS on my radar for a while, and investigating this issue, I found they have something similar to what we need. I've been toying around with it on a smaller test project, and so far, it's great. It also has a Tailwind preset, so this might be an exciting direction.

[taverasmisael]

Using Uno reduced the final CSS size, and that MPA is something I want to explore. I'll open a PR with my findings so we can test that on a staging environment

[taverasmisael]

tl;dr of #20 Uno is great, but the "gains" are not enough to make the change. Our styles are not that big, and there's not much unused CSS. We are closing this again.

For more details and side-to-side comparison, check the spike PR switching to UNO and using per-module style splitting.