Next.js Discord

Discord Forum

[Help] CSS from the previous page remains on the new page

Unanswered
Morelet’s Crocodile posted this in #help-forum
Open in Discord
Avatar
Morelet’s CrocodileOP
Hello !

I'm posting this today because I have a problem when I change pages, the CSS from the previous page remains on the new page. I think it's a cache problem, but I'm not sure. For the page change, I use Link tags.

Thank you in advance for your answers.

7 Replies

Avatar
Morelet’s CrocodileOP
Sorry, I forgot to complete the title.
Avatar
Morelet’s CrocodileOP
I think it's an SSR problem
Avatar
Peterbald
I think it is global.css problem.
As you know there is global.css in Next.js project. Please check it out again~
Avatar
Morelet’s CrocodileOP
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
}


My global css just import tailwind components and themes. I have to reload the page by hand for the server to render my page again and apply the correct css.
Avatar
Czechoslovakian Wolfdog
@Morelet’s Crocodile Were you able to figure out what's going on? I think I'm having a similar problem.

When navigating around, css chunks from different pages are being stacked on top of each other...
Avatar
Morelet’s CrocodileOP
@Czechoslovakian Wolfdog Hey ! Then my problem came from a css import from the public folder that handled a media overflow. No idea why it was doing that (a server rendering problem maybe ? I don't know enough about it, sorry). Finally, I deleted it, and used the Tailwinds classes, and it worked. I still don't know why
Avatar
Czechoslovakian Wolfdog
Ah okay, no worries. Thanks for following up!