Official guidance on building separate CSS files per website section?

[ecole-du-web]

Hi Tailwind team 👋

I’m using Tailwind CSS v4 and trying to build separate CSS files for different parts of my app (blog.css, dashboard.css, etc.), each one containing only the utility classes used in that section.

In v3, this was possible using the CLI --content flag. In v4, it seems that all builds are expected to be unified.

Is there an officially recommended way to build multiple Tailwind CSS outputs with custom content sources per file, without ending up with one global app.css?

(If this is already addressed somewhere and I missed it, feel free to point me in the right direction — maybe @adamwathan or someone from the team knows if there’s a recommended setup?)

Thanks for any clarification!

[wongjn]

You could have separate CSS input files for each section. Disable automatic source detection in each of them and then explicitly specify source paths per each section in each respective CSS file.

[ecole-du-web]

Hey, thanks for the help!

I tried using the official example code, and while I eventually got it to work, I ran into a couple of strange issues.

First, the source(none) syntax isn't recognized by VS Code, which throws a syntax error in the editor. It seems the syntax is only understood by Tailwind's build process, but not by standard CSS parsers or IDEs.

Second, I created a simple script like this:

"buildSeparateFile": "npx tailwindcss -i ./styles/blogInput.css -o ./styles/blog.css"

It works fine as long as I don't use the --watch flag. But as soon as I add --watch, it completely ignores the @import "tailwindcss" source(none); directive and starts scanning my whole project again.

My folder structure is very simple — just a minimal Tailwind v4 + PostCSS setup.

Let me know if I missed something. I’d love to make this work reliably, especially with the --watch flag.