Add support for generating multiple CSS files per page template (e.g. front-page.css, single.css)

[mateoworks]

Hi there 👋

I've been working with _tw and really appreciate how streamlined it makes using Tailwind CSS in WordPress themes. However, I noticed that currently, all styles are compiled into a single main.css file.

This works well for small sites, but for larger projects or performance-sensitive builds, it would be great to have the option to split the CSS by page templates — such as:

• front-page.css
• home.css
• single.css
• archive.css
• etc.

This would allow developers to enqueue only the necessary styles per page, improving performance metrics like LCP and reducing unused CSS.

Proposal

Could we add support for generating multiple CSS bundles based on templates? This could be optional or follow a pattern similar to how JS is handled.

Alternatively, perhaps the build system (build.js) could be updated to support this out of the box with some guidance in the documentation.

Let me know your thoughts! I'm happy to help draft a PR if this aligns with the project's goals.

[gregsullivan]

Hello—Thanks for this!

The Tailwind 3 documentation has a page called Optimizing for Production that says this:

Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project.

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.

With CSS files this small, you don’t have to worry about complex solutions like code-splitting your CSS for each page, and can instead just ship a single small CSS file that’s downloaded once and cached until you redeploy your site.

I think for the vast majority of projects, multiple CSS files would increase overhead with fairly minimal gains. In my experience, the CSS files generated with stock Tailwind are small enough—especially minified and compressed over the network—that LCP is unlikely to meaningfully shift based solely on the CSS rules not shared between pages.

Happy to discuss this further, though!