Static Site Generation Issue: CSS Styles Applied Differently Depending on Site Navigation

[LloydThinks]

Versions

• nuxt: v2.15.3
• node: v16.0.0

Reproduction

No code, I have a question that is hopefully just a misunderstanding about NuxtJS.

Steps to reproduce

Working Example

1. Go to https://lloydm.io
2. Scroll and notice the CSS styling around the headers
3. Click the menu in the top right, go to "Publications"
4. Click my head to go back to the main page. Everything works fine.

Broken Example

1. Go directly to https://lloydm.io/career/research/publications
2. Now click my head in the top left to go back to the home page
3. Notice the styling is no longer correct
4. Refresh the page, styling is fixed

What is Expected?

I expect that the styling applied to each independent of how you got there. However, it appears that the styling is only properly applied if the user arrives at my site directly to the home page.

What is actually happening?

Styling is not always applied correctly.

Additional Notes

• I arrived at this current issue originally when my pages were not rending at all. It appeared to be some issue with fetch not being called in components. Issues [2.14.0] Static Payload not applying to <nuxt-child> children components in some cases #7799 and [2.14] Generate: Conflict between store and fetched payloads causing empty pages #7791 seem to discuss this, but the issue persists. I fixed that problem by moving all requests (to the Nuxt Content API) to asyncData methods in the pages above those components (not ideal, but works). However, now I still have this persistent css styling issue.
• I am using TailwindCSS for the majority of my styling. Most of the time inline in the HTML, but also using @apply in the style tags of Vue. This could be the issue but due to the complexity of the Nuxt static site generator, I have no idea how to start looking into this.

Any and all help is appreciated. I know I have not posted code or configs, but I think I am misunderstanding something basic about how NuxtJS works, and therefore hoping the issue can be resolve with a couple comments. Otherwise, I can look into making my code public in some way.

Lloyd

[danielroe]

@LloydThinks I would guess that this is likely not a result of using a static site but probably due to CSS ordering.

If you have multiple CSS rules of the same specificity, the last defined one takes precedence. It's very possible that the ordering of your CSS is different based on which page you load first. Try to narrow it down the appearance difference to a specific class or rule and then see if you can increase the specificity of that CSS rule.

[LloydThinks]

Hi @danielroe thank you for the advice. I have been hacking away at this issue for the past 3 hours and I've narrowed it down to the use of @apply for TailwindCSS styling. You are right that the ordering is the issue, however, what is not clear is why the server-rendered version works fine, but the statically generated site does not. Is it the case that CSS @apply's do not work when using SSG?

So again perhaps I can get some clarity: what is different when using the SSG? Can I not expect certain things to work?

I'm currently trying to work around this issue by writing my own CSS override mixin, but this is very laborious and perhaps not possible.

Lloyd

[LloydThinks]

I have addressed the issue by removing all @apply usage and instead applying the TailwindCSS classes directly in the html class elements.

Essentially, @applying TailwindCSS classes is powerful because it will override TailwindCSS classes defined in child components, thus allowing you to define default classes in components, and overriding those classes with @apply in parent classes. This doesn't appear to work when using NuxtJS SSG and navigating in certain cases (I still don't know why this, and I maintain that this is a bug).

So, without this @apply functionality, I instead define the TailwindCSS classes in the child component that are default and cannot be overridden. Anytime I need to override a default, I remove it from the child component, and manually list the values I want in all of the parents that use that component. This is of course not very elegant, readable, or extendable, but it works.

Lloyd

[danielroe]

@LloydThinks If you think there is a bug, would you be able to provide a minimal reproduction via https://template.nuxtjs.org ? That would be very helpful, as it is difficult to evaluate without one.

[LloydThinks]

Are you able to run npm run generage and npm run start using that interface? If so, I would give it a try.

[danielroe]

Yes. Just update your dev script in the codesandbox package.json accordingly.

[LloydThinks]

I'm sorry, but I don't understand how to transition the default build into a nuxt generate && nuxt start build. I have tried replacing all of the builds but I don't think it is working. Here is my package.json

{
  "name": "codesandbox-nuxt",
  "version": "1.0.0",
  "description": "Nuxt starter for CodeSandBox",
  "author": "Nuxt.js Team",
  "private": true,
  "scripts": {
    "dev": "nuxt generate && nuxt start",
    "build": "nuxt generate && nuxt start",
    "start": "nuxt generate && nuxt start",
    "generate": "nuxt generate && nuxt start",
    "post-update": "yarn upgrade --latest"
  },
  "dependencies": {
    "@nuxtjs/tailwindcss": "4.1.2",
    "nuxt": "2.15.6"
  }
}

[LloydThinks]

I had to restart the server to force the command to run. Even reloading the webpage did not work. I will keep working at it.

[LloydThinks]

Alright well I got it to run the nuxt generate && nuxt start commands by going to the "server control panel" and selecting "restart sandbox". However, it doesn't appear to be actually generating files in the /dist folder. Additionally, the browser on the left doesn't appear to loading the static files (since there are none in the /dist folder, yet the browser renders the same page).

Am I missing something?

[danielroe]

You may not see the dist folder but it will exist. Feel free to share a minimal GitHub repo if that's easier for you.

[LloydThinks]

Alright well I wasn't able to get all the way to producing the bug I wanted, but the sandbox actually get stuck up on another bug.

When the static site generator is used, the @apply bg-blue-100; style in the index.vue is not applied. If you switch the package.json back to MINIMAL=1 nuxt it does apply that style. My issue I wanted to report is the same bug, but only when switching routes from another loaded page.

https://codesandbox.io/s/sweet-saha-gibo6

Lloyd

[danielroe]

@LloydThinks It's not applied because you have a scoped style in the child component that is overriding it (as it occurs later in the CSS):

It's normal that dev/production have different orderings of CSS. Again, you shouldn't rely on one component's CSS being loaded 'before' another one. The way to address this is simply to increase the specificity of the CSS you want to take precedence.

[LloydThinks]

Hi @danielroe,

It's normal that dev/production have different orderings of CSS.

I think I have a lot more to learn about CSS then. This was unknown to me. I will do some research into the specificity of CSS to improve my laying.

Thank you for all your help!
Lloyd