Are you using css modules?

No, I'm not using CSS Modules. I'm using Sass and Tailwind CSS, and I directly import the styles into each component, page, and layout file. @not-milo.tsx

doesn't nextjs just group all global css imports into one static bundle

so importing them separately doesn't do anything

Yep but is it expected behavior for a stylesheet from a previous route to remain loaded even when it's no longer in use? @riský

if there is only one css file, then every route should import it?

It makes sense when you think like that @riský 🙂

With SSR, any unimported stylesheet isn't included during the first render of the page. However, when I navigate to the page from a different route, the stylesheet from the previous route remains loaded. I would expect the behavior to be consistent between SSR and CSR. Is this discrepancy normal?

if you open up those css files, ie.what are the contents

as i don't see how you are getting page specific styles if your just using global ones...

but you should really just put those imports in the layout file

and is this app dir or pages dir (i have only used used app dir for this so.. could be different)

it's app dir

Consider a scenario where you have two separate layouts, each with its own stylesheet:

The 'Auth' layout uses a stylesheet (auth.layout.scss) that sets the body background to a specific image: body { background: "some-image.jpg" }.
The 'Dashboard' layout uses a different stylesheet (dashboard.layout.scss) that sets padding for the body: body { padding: 8px }.
When you directly enter the URL for the login page in the browser, which uses the 'Auth' layout, the body gets the background image as expected. Similarly, if you directly enter the URL for the dashboard page, which uses the 'Dashboard' layout, the body shows only padding and no background image.

However, if you navigate from the 'Auth' layout to the 'Dashboard' layout using client-side routing, the body ends up having both the padding from the 'Dashboard' layout and the background image from the 'Auth' layout. Because the scss for the Auth layout remains on the head tag. @riský

then you should use module.css i think

but i don't know if that can do styles for body (ill check)

I don't think so, probably I'll wrap the layouts with some div

yeah from what it seems like is that your usecase of diferent css files per route isn't that easy with nextjs (and module.css is what i fully thought)

Oh, I don't think this would be an issue if you only used SASS. Mixing and matching SASS with Tailwind, MUI, Chakra and co. always leads to conflicts.

Pick one and stick to it

yeah that was kinda confusing me

I share the same thoughts and am surprised by this issue. It probably occurred because of what you pointed out. @not-milo.tsx