Segmenting the Output CSS into Multiple Files with Tailwind V4

[ecole-du-web]

If I understand correctly, Tailwind CSS v4 now enforces a single, unified CSS file for an entire project.

Essentially, all content files are scanned, resulting in one monolithic CSS file.

While this file is cached after the first visit—which is beneficial in many cases—what if that isn’t enough? What if I need to generate multiple CSS chunks for specific sections like /blog/, /dashboard/, or /payment/*?

In previous versions, this was possible using the --content flag, but it appears to have been removed in Tailwind v4.

I understand the advantages of a global CSS file, such as efficient caching and reduced duplication through class reuse. However, in some cases, having a single large CSS file isn’t ideal.
For example, it doesn't always make sense for a simple "About" page to load styles meant for the dashboard, settings, or other unrelated sections.

Even with Gzip compression, there are valid reasons to split CSS.
Shopify, for instance, appears to use Tailwind while also chunking its CSS into separate files. This suggests that, in some scenarios, CSS chunking remains a valuable optimization strategy.
It would be helpful if Tailwind provided an option for this rather than enforcing a single approach.

To see this in action, you can inspect Shopify’s CSS behavior:

1. Go to shopify.com
2. Open the Network tab in DevTools and filter by CSS
3. Compare the following pages:

• Homepage: home-DET5KEyr.css
• Blog: blog-Df5jQNSJ.css
• Pricing: brochureV2-BOKN8Mxq.css

Would it be possible to reintroduce a way to generate segmented CSS files in Tailwind v4?