Tailwind CSS code Splitting doesn't work about next.js

[leo-cheron]

@leo-cheron Tailwindcss by default generates 1 CSS file, as mentioned by @nhducit!

I guess I'll have to combine it with modules to manually split some heavy chunks.

[nhducit]

This is how Tailwind works. You will get the same result with SolidStart, Svelte Kit, or Nuxt.

Next.js cannot do anything here.

[jantimon]

For MS Teams Microsoft used auto generated atomic styles (so basically similar to tailwind but auto generated) from their code resulting in a 1 MB .css file:

mui/material-ui#38137 (comment)

Why it matters? In a large application, you must preload CSS for the entire app. You can't load something later without incurring a performance hit.

[samcx]

@leo-cheron Tailwindcss by default generates 1 CSS file, as mentioned by @nhducit!

[oliviertassinari]

I would be very interested in a benchmark on the cost of not having code spitting for Tailwind CSS. There seems to be a cost:

• React tech lead encourages to code split Tailwind CSS: reactwg/react-18#108

If you extract everything into literally a single CSS file for your whole site you might get away with just putting a <link> reactwg/react-18#106 and call it a day. That might not be such a bad idea for many small sites that use atomic CSS or reusable rules like tailwind. Those tend to plateau in their size growth.

However, even in those systems you eventually tend to grow out of them and loading all CSS up front becomes a bad idea. In those cases you want to inject CSS files based on if they're used by the components you're rendering on the server.

• https://youtu.be/nWcexTnvIKI?si=2Yea9mRcgVtMY19i&t=1312 unused CSS has a one-time network work, a one-time CSS parsing cost, and an ongoing style resolution runtime cost, each time a change in the DOM happens.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.