Multi CSS file support !

[RanjbarAli]

Hello,
I am working on a Nuxt.js v4 project with Tailwind CSS v4.x. My project includes multiple layouts and pages, where each layout has its own custom Tailwind CSS file located in the assets directory. For example:

• Layout X -> assets/css/layout-x.css
• Layout Y -> assets/css/layout-y.css
• ... (additional layouts)

I would like to load and compile each layout's CSS file separately within its respective layout to avoid style conflicts and ensure proper isolation. How can I achieve this in a clean and idiomatic way using Tailwind CSS best practices?

[wongjn]

Tailwind CSS best practice would be to use a single CSS file. This is so that it is downloaded once and then cached for all subsequent requests. Generally, in a project, there would be class reuse so there would be minimal differences between CSS files as the size of the site increases.

That being said, you'd:

• import the relevant CSS entry file per layout.
• Disable automatic source detection.
• Explicitly register sources in each CSS entry file.

[RanjbarAli]

There is no way, is there?
The templates for each layout are completely different from one another.

[wongjn]

There is a way. You could:

• import the relevant CSS entry file per layout.
• Disable automatic source detection.
• Explicitly register sources in each CSS entry file.

[RanjbarAli]

<script setup> import "~/assets/css/starter.css"; </script>

in layout file.

All imports for the layouts are imported together on each page.

[wongjn]

You might have to configure Nuxt to separate them out somehow. I don't know how to do that though.