\n\u003C/template>\n\n\u003Cstyle scoped>\n.blue { background-color: blue; }\n\u003C/style>\n```\n\n```vue\n// PARENT\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBlueSquare class=\"red\" />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.red { background-color: red; }\n\u003C/style>\n```\n\nBoth plain Vue and Vue with SSR have the correct order:\n\n**Vue**\n\u003Cimg width=\"714\" height=\"163\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fa26e7f4-3f89-4bae-b0b1-1fd19f383a02\" />\n\n**Vue SSR**\n\u003Cimg width=\"601\" height=\"190\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e1dc7cc-4b32-4ccc-957c-dd207b7a836d\" />\n\n\nBut in Nuxt, the order is incorrect when built:\n\n**Nuxt**\n\u003Cimg width=\"596\" height=\"85\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/62458e07-886e-4c0b-b569-db6e08805f35\" />\n\n\n---\n\n\nIs this Nuxt related or not?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3170],{"name":3160,"color":3161},33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.68061656,{"labels":3177,"number":3182,"owner":3150,"repository":3150,"state":3183,"title":3184,"updated_at":3185,"url":3186,"score":3187},[3178,3181],{"name":3179,"color":3180},"3.x","29bc7f",{"name":3141,"color":3142},12217,"closed","Any plans on switching to pnpm?","2023-01-19T16:00:25Z","https://github.com/nuxt/nuxt/issues/12217",0.64754903,{"description":3189,"labels":3190,"number":3197,"owner":3150,"repository":3150,"state":3183,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `pnpm@8.6.11`\r\n- Builder: `vite`\r\n- User Config: `extends`, `telemetry`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\n### Create component in our Nuxt layer\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton :class=\"[$style.root]\">\r\n \u003Cspan :class=\"$style.title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle module>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n```ts\r\nexport default defineNuxtConfig({\r\n extends: [\"our-same-layer\"],\r\n});\r\n```\r\n\u003Cimg width=\"1641\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/37b8fd5c-40bf-40a2-9178-c7dbb6a8c2dd\">\r\n\r\n### But if we run only layer, we get the correct result\r\n\u003Cimg width=\"1643\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/dbfb15e0-5180-43b1-8b07-76a86bb445f4\">\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nDuplicate stylesheet in dev when using Nuxt Layer..\r\n### Additional context\r\n\r\nI tested pure css, it's reproduced on css module and pure css\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton class=\"root\">\r\n \u003Cspan class=\"title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n\u003Cimg width=\"1642\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/422ddc69-a372-4255-a7a0-b33fdf99c54a\">\r\n\r\n### Logs\r\n\r\n_No response_",[3191,3192,3193,3194],{"name":3179,"color":3180},{"name":3141,"color":3142},{"name":3144,"color":3145},{"name":3195,"color":3196},"layers","006B75",22658,"Duplicate stylesheet in dev when using Nuxt Layer","2023-09-11T13:39:19Z","https://github.com/nuxt/nuxt/issues/22658",0.6537177,{"description":3203,"labels":3204,"number":3209,"owner":3150,"repository":3210,"state":3183,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Vesion: `3.17.1`\n- Nitro version: `2.11.11`\n- Package Manager: `pnpm@10.8.0`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.0\n\n### Reproduction\n\nhttps://github.com/rudrokhanpro/nuxt-ui-tailwind-in-layers-bug\n\n### Description\n\nHello!\nI have encountered a bug affecting TailwindCSS colors in Nuxt Layers.\nI have attached a repo that mimics a project I'm working on.\n\nThere is a first root Nuxt app with NuxtUI called `zero`.\nThere is also a second Nuxt app that `extends: [\"../zero\"]`.\nFinally, there is a third and last Nuxt app that `extends: [\"../one\"]`.\n\nIf we run the `one` project, we can access [`/one`](http://localhost:3000/one), a page that displays components both from the `zero` and `one` projects. \nIf we run the `two` project, we can access [`/two`](http://localhost:3000/two), a page that displays components both from the `zero`, `one` and `two` projects.\n\nYou will notice that the page seems \"empty\" but in reality there are button whose styles are not being set correctly. It seems that it only affects colors because if we inspect the elements we can see that the padding and some hover styles are being applied correctly.\n\n\n\nTo fix this issue, I had to safelist all colors in the root project:\n\n```css\n/* assets/css/main.css */\n@source inline(\"{hover:,disabled:,focus:,}bg-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,{100..900..100},950}\");\n```\n\nAnd we get the following result:\n\n\n\n### Additional context\n\nI have been migrating and updating my project to Nuxt UI v3 since it was in alpha and it has been a great experience thanks to the contributors of this repository. \n\nThis bug was introduced with Tailwind v4.0.8. I checked every single release and it seems related to the TailwindCSS import and `@theme static {}`\n\n### Logs\n\n```shell-script\n\n```",[3205,3206],{"name":3141,"color":3142},{"name":3207,"color":3208},"v3","49DCB8",4049,"ui","Tailwind colors not working in Nuxt Layers","2025-05-19T10:29:55Z","https://github.com/nuxt/ui/issues/4049",0.6635332,{"description":3216,"labels":3217,"number":3220,"owner":3150,"repository":3210,"state":3183,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v24.2.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.12.1\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt/Nuxt UI\n\n### Version\n\nv3.17.5/v3.1.3\n\n### Reproduction\n\n```\npnpm create nuxt {project-name}\n\nskip setting up git and don't add any modules\n\npnpm add @nuxt/ui\n```\nSetup as per the docs for nuxt.config and css\n\nrun `pnpm run dev`\n\n### Description\n\nI've tried server times with the same results using `pnpm`. `npm` seem to work fine following the same steps.\n```console\nPre-transform error: Can't resolve 'tailwindcss' in /demo/assets/css'\n Plugin: @tailwindcss/vite:generate:serve\n File:/demo/assets/css\n```\n\n### Additional context\n\nJust cursor and warp and both product the same results.\n\n### Logs\n\n```shell-script\n\n```",[3218,3219],{"name":3141,"color":3142},{"name":3207,"color":3208},4339,"Issue using pnpm 10.12.1: Can't resolve 'tailwindcss'","2025-06-16T12:54:09Z","https://github.com/nuxt/ui/issues/4339",0.6650525,{"description":3226,"labels":3227,"number":3231,"owner":3150,"repository":3150,"state":3183,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.15.0`\r\n- Nuxt Version: `3.0.0-rc.10`\r\n- Nitro Version: `0.5.3`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n- With UnoCSS and preflight activated for CSS\r\n\r\n### Reproduction\r\n\r\nSee this repo for reproduction : https://github.com/g4w3l/nuxt3rc10-unocss\r\n\r\n- If you launch the server with `npm run dev`, when you go on `/page1` you see a green button as expected\r\n- If you build it and launch it with \r\n```\r\nnpm run build\r\nnode .output/server/index.mjs\r\n```\r\nThe button on `/page1` goes transparent\r\n\r\n### Describe the bug\r\n\r\nI've put some styles on a button in a component. All works well in `dev` mode, if you inspect the `\u003Cbutton>`, the order of the styles is correct and the `bg-green` is applied : \r\n\r\n\r\nIn built version the order of the styles is inverted, thus the button is transparent : \r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3228,3229,3230],{"name":3179,"color":3180},{"name":3141,"color":3142},{"name":3144,"color":3145},14943,"Nuxt RC10 - Reset inline styles take priority on built bundle","2023-01-19T17:42:57Z","https://github.com/nuxt/nuxt/issues/14943",0.6656322,{"description":3237,"labels":3238,"number":3241,"owner":3150,"repository":3150,"state":3183,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v20.18.1`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.22.5`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.15.4`\n- Builder: `-`\n- User Config: `extends`, `compatibilityDate`, `devtools`, `ssr`, `devServer`, `modules`, `runtimeConfig`, `i18n`\n- Runtime Modules: `@vueuse/nuxt@13.0.0`, `@nuxtjs/i18n@9.3.1`, `@pinia/nuxt@0.10.1`, `@nuxtjs/tailwindcss@6.13.2`, `@primevue/nuxt-module@4.3.1`, `@nuxt/fonts@0.11.0`\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-g35yawsg?file=app.vue\n\n(copied from [the Nuxt docs](https://nuxt.com/docs/getting-started/seo-meta#components))\n\n### Describe the bug\n\nSince the 3.16.0 update, the `\u003CStyle>` component does not render any actual styles in the document head. It did work fine in 3.15.4.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3239,3240],{"name":3141,"color":3142},{"name":3144,"color":3145},31332,"Nuxt 3.16.0 - Style components are not rendered","2025-03-13T07:45:17Z","https://github.com/nuxt/nuxt/issues/31332",0.6722885,{"description":3247,"labels":3248,"number":3259,"owner":3150,"repository":3210,"state":3183,"title":3260,"updated_at":3261,"url":3262,"score":3263},"### Environment\n\n- Operating System: Darwin\n- Node Version: v21.7.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.5.0\n- Builder: -\n- User Config: extends, components, devtools, googleFonts, modules, runtimeConfig, compatibilityDate, typescript, build, vite, devServer, app, colorMode, spaLoadingTemplate, bugsnag\n- Runtime Modules: @nuxtjs/google-fonts@3.2.0, @nuxt/ui@3.0.2, nuxt-bugsnag@8.4.0, @nuxt/devtools@2.3.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\n\n\n### Description\n\nI try to make a design with position absolute. It works correctly when I use `solid` colors. But if I use `soft` or `subtle` variants it displays the background line anyway. Also, the color varies depending on the background color.\n\nIs there a way to make it work with those colors? \n\nMaybe the solution is to create variables for those colors instead of using opacity.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3249,3250,3251,3254,3257],{"name":3141,"color":3142},{"name":3207,"color":3208},{"name":3252,"color":3253},"triage","ffffff",{"name":3255,"color":3256},"closed-by-bot","ededed",{"name":3258,"color":3256},"stale",3863,"Button color may not work properly in position absolute","2025-06-18T09:01:10Z","https://github.com/nuxt/ui/issues/3863",0.6740607,["Reactive",3265],{},["Set"],["ShallowReactive",3268],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fsRqzPUcti1zMOaQAIhjEpinX01WZJSxH_LFwMZUBpZk":-1},"/nuxt/ui/3047"]