Fresh nuxt3 install weird inline styles issue
Hello,
Today I started a new nuxt3 project but I noticed that my tailwind utility classes were not applied. I did investigate and it turns out there is an inline style which is taking priority. I have absolutely no idea where it comes from. I tried to create several projects with as few modules as possible. Just nothing but
pnpm create nuxt test and the problem occurs.
I also tried on edge where i have no extensions to see if that could be the issue but it is not...
Then I tried to set the future: { compatibilityVersion: 4} and the problem was gone. But i'm not willing to commit to this flag for a production project.
Then i also tried
export default defineNuxtConfig({
features: {
inlineStyles: false // Only inline Vue component styles, not global CSS
}
})
But it did not remove that inline style at all...
I'm really out of ideas.
Can anyone help me ?
Thanks a lot,
16 Replies
Hi @Slade. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand your frustration with the inline styles issue in your new Nuxt 3 project. This is actually a known behavior in Nuxt 3 that's changing in Nuxt 4.
In Nuxt 3, by default, all CSS (including global styles) is inlined in the HTML, which can sometimes cause priority issues with utility classes like Tailwind. This is why setting
compatibilityVersion: 4 fixed your issue - Nuxt 4 changes this behavior.
According to the Nuxt upgrade documentation, in Nuxt 4, "Nuxt will now only inline styles for Vue components, not global CSS" Migrating to Nuxt 4. This is considered a better approach as it allows caching of global CSS files while reducing separate network requests.
If you don't want to use the compatibility version flag for your production project, you can specifically configure just this feature in your nuxt.config.ts:
This will give you the Nuxt 4 behavior for styles without opting into all the other Nuxt 4 changes.
Some users have reported similar issues when using Tailwind with other UI frameworks, as mentioned in a Stack Overflow post about Tailwind and PrimeVue styles conflicts.
If you continue to have issues, you might want to check if there are any specific conflicts between Tailwind and other CSS frameworks or modules you're using in your project.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@341273466806337539> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai i already tried to disable the inlinestyles but it dit not remove that one
Let me check the knowledge base for you again. One moment! :books:
----------------------
I understand that disabling
inlineStyles didn't resolve your issue. Let's look deeper into this problem.
Based on the knowledge sources, there might be a few other factors to consider:
1. The inlineStyles feature in Nuxt can be more granularly configured. Instead of just setting it to false, you could try setting it to a function that determines which components should have inlined styles:
2. There might be an issue with how Vue components with TypeScript are being processed. According to a GitHub pull request, there was a bug where components with lang="ts" weren't properly handling inline styles. Make sure you're using the latest Nuxt version where this has been fixed.
3. Some users have reported style conflicts between Tailwind and other UI frameworks. If you're using any other UI libraries alongside Tailwind, there might be conflicts in how styles are applied.
4. There could be hydration issues causing style mismatches between server and client rendering, especially if you're using certain modules like PWA modules as mentioned in a Stack Overflow post.
5. In some cases, the issue might be related to how styles are imported or the order of CSS processing. You might want to check your CSS import order in your nuxt.config.ts.
If you're still experiencing issues, could you share more details about:
- Any other modules you're using
- Your exact Nuxt version
- A minimal code example showing the problem
- The specific inline styles that are causing the issue
This would help in providing a more targeted solution to your specific case.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@341273466806337539> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai I'm not using any module, nuxt version is 3.16.1
The style causing the issue is embedded in the head tag as follows
@property --gradient-angle{syntax:"<angle>";inherits:false;initial-value:180deg}@keyframes gradient-rotate{0%{--gradient-angle:0deg}to{--gradient-angle:360deg}}*,:after,:before{border-color:var(--un-default-border-color,#e5e7eb);border-style:solid;border-width:0;box-sizing:border-box}:after,:before{--un-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}h1,h2,h3{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}h1,h2,h3,p,ul{margin:0}ul{list-style:none;padding:0}img,svg{display:block;vertical-align:middle}img{height:auto;max-width:100%}*,:after,:before{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the inline styles you've shared, I can identify that these are coming from UnoCSS/Tailwind's base styles that Nuxt is automatically inlining in your application.
This issue appears to be related to the changes in Nuxt 3.16.x regarding how styles are handled. In Nuxt 3.16.0, there were several changes to the styling system, particularly with the upgrade to Unhead v2 and changes in how styles are inlined.
According to the knowledge sources, there are a few potential solutions:
1. Module compatibility issues: Several users reported issues with Nuxt 3.16.0 and styling when using certain modules. As mentioned in a GitHub issue, upgrading modules like
@nuxtjs/tailwindcss to their latest versions helped resolve styling issues after upgrading to Nuxt 3.16.0.
2. Package manager hoisting issues: There's a known issue with Nuxt 3.16.0 and package managers using hoisting. As noted in another GitHub issue, using shamefully-hoist=true with pnpm can break the build. If you're using pnpm, you might want to set shamefully-hoist=false.
3. Tailwind CSS v4 compatibility: If you're using Tailwind CSS v4 (which is now supported in Nuxt UI v3), there might be some HMR issues in server mode as mentioned in this GitHub issue.
Since you mentioned you're not using any modules, I would recommend trying these steps:
1. Make sure your CSS is properly imported in your main CSS file and in your Nuxt config
2. Try creating a CSS file with your Tailwind imports:
And then import it in your nuxt.config.ts:
3. If you're using pnpm, check your .npmrc settings for hoisting
4. As a last resort, you could try downgrading to Nuxt 3.15.x until these issues are fully resolved in a future patch release
The inline styles you're seeing are the base/reset styles that Tailwind/UnoCSS applies, and they're being inlined in the head due to Nuxt's default behavior. The issue is likely related to how these styles are being applied or prioritized in Nuxt 3.16.x.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@341273466806337539> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Would you be able to provide more information, such as the
package.json, nuxt.config.ts, and so on?Yes sure it's the default from the cli, i even tried npm after pnpm as it may have some issue. Let me create a public repro on github. As light as possible
It should be available there: https://github.com/cedric-vermeulen/nuxt3-style-issue
GitHub
GitHub - cedric-vermeulen/nuxt3-style-issue
Contribute to cedric-vermeulen/nuxt3-style-issue development by creating an account on GitHub.
When you inspect the page in the head there is one <style> tag below the title. The only one without any property.
If i had nuxt/ui (with tailwind) then for some reasons tailwind styles got overriden by that style. IE: Image do not size with helper like h-6. It's the reason why i noticed the issue and did investigate where it come from. But i made the test app as light as possible I think and it's still there.
The strange thing is i tried the SaaS repo sample from nuxt/ui to test it out. And they do not have the issue, same nuxt version etc..
I'm so lost.
Also to mention that in the meantime i tried to revert to 3.15 and even 3.0 with no success.
@Slade So thanks for the reproduction but it's very minimal can you add exactly what's causing the problem, like tailwind already?
And as for compatibility v4, the flag is very, very stable and you can adopt the new structure with your eyes closed. All Nuxt sites already use it, and I've been using it myself for several months now without the slightest problem.
I did add tailwind to expose the issue but the css causing the issue is already there.
I do add this
<img src="~/assets/icons/logo.png" alt="Discover Nuxt" class="h-12 w-auto" />
But i got the result in the screenshot
I did update the repo with tailwind installed and next/ui and this sample
What i should have is this,but the rule is being overriden by the "default" img styles
But indeed i did check the doc regarding the v4 flag and there are no BK so I guess i'll use it already. But still that issue is not leaving my mind. If you have any idea i'm really curious to know.
<UApp> is causing the issue. If i remove it then it's working. But obviously i can't.