Slade
Fresh nuxt3 install weird inline styles issue
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.
24 replies
Fresh nuxt3 install weird inline styles issue
It should be available there: https://github.com/cedric-vermeulen/nuxt3-style-issue
24 replies
Fresh nuxt3 install weird inline styles issue
@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: }24 replies