NuxtPage doesn't load Tailwind styles unless accessed in App.vue
I'm still trying to narrow down the exact root cause of this issue but this is what I know so far.
We have a Nuxt UI application set up where we are having problems with pages served by
<NuxtPage /> not displaying Tailwind classes, unless they have been used at the App.vue level.
This is our App.vue
This is the default index.vue - i.e. the first page to be served
On the example above the page initially loads with a black background, rather than the defined bg-emerald-200. If that class is added to the disabled <div> on App.vue the colour is loaded. This even persist (for a while) if the div is removed.
It is possible that the issue is related to using layers. I am currently preparing a test application to try and prove the cause3 Replies
Hi @dankell.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources provided, your issue appears to be related to CSS processing in Nuxt layers, which is a known challenge when using Tailwind CSS.
The knowledge sources indicate that Nuxt Layers may not process CSS correctly, particularly with Tailwind CSS. When using layers, Tailwind needs to be explicitly configured to scan components from all layers to generate the necessary utility classes.
According to the discussion in the Nuxt Layers CSS issue, one recommended solution is to configure your main CSS file at the project root level to include sources for all layers. Here's an approach that was suggested:
In your project root's
nuxt.config.ts, set the css property to include a main CSS file, and in that CSS file, add @source directives for all your layers:
The issue you're experiencing—where Tailwind classes only work after being used in App.vue—suggests that Tailwind isn't scanning your page components during the initial build. When you add a class to App.vue, it forces Tailwind to include that utility in the generated CSS, which is why it then persists for a while.
The knowledge sources also mention that there's an ongoing challenge with CSS order for layers, which could be contributing to your issue.
I'm sorry, but the knowledge sources don't provide a complete step-by-step solution specifically for your Nuxt UI setup with layers. You may need to adjust your Tailwind configuration to ensure it scans all relevant directories in your layers, or configure the CSS sources as described above.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@602890303753682944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
This solved the problem with a slight change. The main.css file needed to have the following as the source, dur to the depth of the nesting in the Layers