\r\n Loading\r\n \u003C/div>\r\n \u003C/template>\r\n \u003Cdiv class=\"content\" ref=\"someRef\">\r\n This text should NOT be large!\r\n Remove the \u003Cpre>ref=\"someRef\"\u003C/pre> from the parent and it works\r\n \u003C/div>\r\n \u003C/ClientOnly>\r\n\u003C/template>\r\n```\r\n\r\n**Expected behaviour when loading the page:**\r\nA big loading spinner, and, when everything is done loading, some normal text, like this:\r\n\r\n\r\n**Instead,** you get this:\r\n\r\n\r\nWhen you remove the `ref=\"someRef\"` from the content div, it works as expected",[],"nuxt","icon","open","Unexpected behaviour when using an Icon within ClientOnly fallback","2023-12-18T12:08:48Z","https://github.com/nuxt/icon/issues/129",0.74483293,{"description":3028,"labels":3029,"number":1221,"owner":3020,"repository":3021,"state":3030,"title":3031,"updated_at":3032,"url":3033,"score":3034},"I want remove my icon when my screen is small and i adds the `hidden` class off Tailwind CSS but in browser developer tools i see the Icon CSS properties overlap with the tailwind one.\r\n\r\n\r\n\r\nIs there any way for me to use tailwind's hidden class?",[],"closed","Can't use Tailwind CSS hidden class","2023-10-05T02:17:38Z","https://github.com/nuxt/icon/issues/108",0.64003533,{"labels":3036,"number":3043,"owner":3020,"repository":3020,"state":3030,"title":3044,"updated_at":3045,"url":3046,"score":3047},[3037,3040],{"name":3038,"color":3039},"pending triage","E99695",{"name":3041,"color":3042},"2.x","d4c5f9",7197,"purgeCSS ignores tailwind classes in nuxt.config.js (bodyAttr, htmlAttrs)","2023-01-22T15:34:50Z","https://github.com/nuxt/nuxt/issues/7197",0.6907531,{"description":3049,"labels":3050,"number":3059,"owner":3020,"repository":3060,"state":3030,"title":3061,"updated_at":3062,"url":3063,"score":3064},"### Environment\n\nNuxt project info:\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: modules, compatibilityDate\r\n- Runtime Modules: @nuxt/ui@2.18.3\r\n- Build Modules: -\r\n------------------------------\n\n### Version\n\nv2.18.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ktbnby?file=README.md,app.vue,assets%2Fcss%2Ftailwind.css\n\n### Description\n\nBefore the `nuxt-icon` rewrite with `nuxt-ui` 2.18.0 you could write following kind of custom css into `assets/css/tailwind.css`:\r\n```\r\n@layer utilities {\r\n .i-lb {\r\n @apply scale-x-[-1];\r\n @apply i-heroicons-light-bulb;\r\n }\r\n}\r\n```\r\n\r\nAfter 2.18.0 this breaks as the `i-heroicons-light-bulb` class does not exist anymore in that context. \n\n### Additional context\n\nThe goal is to create a custom icon (in this case `i-lb`) that uses existing icon but adds something more necessary, like that scale apply as an example.\n\n### Logs\n\n```shell-script\n[plugin:vite:css] [postcss] /home/projects/nuxt-ui/assets/css/tailwind.css:11:5: The `i-heroicons-light-bulb` class does not exist. If `i-heroicons-light-bulb` is a custom class, make sure it is defined within a `@layer` directive.\n```\n",[3051,3054,3057],{"name":3052,"color":3053},"bug","d73a4a",{"name":3055,"color":3056},"closed-by-bot","ededed",{"name":3058,"color":3056},"stale",1998,"ui","Custom CSS rule to apply icon class in tailwind.css not working after 2.18 release","2025-07-30T02:13:39Z","https://github.com/nuxt/ui/issues/1998",0.7060461,{"description":3066,"labels":3067,"number":3075,"owner":3020,"repository":3020,"state":3030,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Environment\n\nnode: v16.15.1\r\nnuxt: ^3.2.0\r\ntailwindcss: ^6.2.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ky7itr\n\n### Describe the bug\n\nHello team,I want to use the style of tailwindcss: https://tailwindcss.com/docs/gradient-color-stops\r\n\r\nso I wrote this:\r\n\r\nresult:\r\n\r\nIt's right,now I use dynamic class:\r\n\r\nreuslt:\r\n\r\n\r\nIt can be seen from the console that the style is indeed written into the class,so what did I wrong?If you can see right style,please \r\nrestart the project,thanks.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3068,3071,3072],{"name":3069,"color":3070},"3.x","29bc7f",{"name":3038,"color":3039},{"name":3073,"color":3074},"⛔️ can be closed","484893",19013,"Nuxt3 cannot use tailwindcss in dynamic class","2023-02-14T08:39:44Z","https://github.com/nuxt/nuxt/issues/19013",0.7076595,{"description":3081,"labels":3082,"number":3088,"owner":3020,"repository":3020,"state":3030,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.17.0\r\n- Nuxt Version: 3.10.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.6.7\r\n- Builder: -\r\n- User Config: devtools, postcss, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nCheck out this commit, run `npm run dev` and add pairs:\r\n\r\nhttps://github.com/mktcode/trading-assistant/commit/0ef592d39133d7af8030331b894a95727af117d9\r\n\r\nThe second pair has wrong classes. It's missing the classes of the wrapper div and the button is blue instead of red.\r\nIf you remove the PairSelect component or wrap it in another element, it fixes the display issue. So it has something to do with it. But what?\r\n\r\n### Describe the bug\r\n\r\n\r\n\r\nFor some reason classes aren't applied correctly in this v-for loop of a custom component. If it was the first or last element I could think of a reason but the second element just weirdly not having the classes.... I'm a bit puzzled. Maybe it's because it's monday but maybe it's because of Nuxt doing something weird? Idk. Maybe it's not even nuxt but Vue itself.\r\n\r\n\r\n\r\nIt's always the second div that takes the classes of the select component.\r\n\r\nIt is because the v-for is not wrapped in it's own parent element but I think I never had such a weird issue with that.",[3083,3084,3085],{"name":3069,"color":3070},{"name":3038,"color":3039},{"name":3086,"color":3087},"upstream","E8A36D",25626,"Tailwind classes missing in v-for loop.","2024-02-05T11:55:12Z","https://github.com/nuxt/nuxt/issues/25626",0.71118987,{"description":3094,"labels":3095,"number":3102,"owner":3020,"repository":3060,"state":3030,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.6.1\r\n- Nuxt Version: 3.13.0\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.6.12\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-rzyn6r?file=assets%2Fcss%2Ftailwind.css\n\n### Description\n\nI tried to use `@apply` in `\u003Cstyle>` block in my vue files. But I got the error that my class does not exists.\r\n```\r\n[vite-node] [plugin:vite:css] [CssSyntaxError] ./app.vue:9:2 : The `bar` class does not exist. If `bar` is a custom class, make sure it is defined within a `@layer` directive.\r\n```\r\nI also tested it without `@nuxt/ui` module but only `@nuxtjs/tailwindcss` module, which works perfectly fine.\r\nI looked for config in nuxt UI document, but didn't find anything that could help fixing this.\n\n### Additional context\n\nHere's one reproduction with only `@nuxtjs/tailwindcss` installed\r\nhttps://stackblitz.com/edit/nuxt-ui-eadnqo?file=nuxt.config.ts\n\n### Logs\n\n_No response_",[3096,3097,3100,3101],{"name":3052,"color":3053},{"name":3098,"color":3099},"triage","ffffff",{"name":3055,"color":3056},{"name":3058,"color":3056},2099,"custom tailwind style in `@layer` directive cannot be used within `\u003Cstyle>` block","2025-06-18T09:06:17Z","https://github.com/nuxt/ui/issues/2099",0.71449935,{"labels":3108,"number":3110,"owner":3020,"repository":3020,"state":3030,"title":3111,"updated_at":3112,"url":3113,"score":3114},[3109],{"name":3069,"color":3070},11875,"TailwindCSS only works on client-side","2023-01-19T15:48:25Z","https://github.com/nuxt/nuxt/issues/11875",0.7213567,{"description":3116,"labels":3117,"number":3119,"owner":3020,"repository":3020,"state":3030,"title":3120,"updated_at":3121,"url":3122,"score":3123},"I've got tailwind working with PurgeCSS with Nuxt. But I am unable to get `@apply` to work in Vue Single File Components. \r\n\r\nThe only way around this is to put everything in my `main.scss`. And the consequence of this is I lose the ability for code splitting in the SFC.\r\n\r\nAnyone got an idea how to fix this?\r\n\r\nAdding `@tailwind utilities;` does it but it adds the whole utility into server-bundle.json on `yarn build` hence bloating the built files. \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1990\">#c1990\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3118],{"name":3041,"color":3042},2273,"Integrating TailwindCSS into Nuxt SFC ","2023-01-18T15:43:52Z","https://github.com/nuxt/nuxt/issues/2273",0.7287225,{"labels":3125,"number":3134,"owner":3020,"repository":3020,"state":3030,"title":3135,"updated_at":3136,"url":3137,"score":3138},[3126,3127,3128,3131],{"name":3069,"color":3070},{"name":3086,"color":3087},{"name":3129,"color":3130},"🔨 p3-minor","FBCA04",{"name":3132,"color":3133},"upstream-bug","B60205",13417,"Binding to CSS wrong variable name in SSR","2023-01-19T16:55:43Z","https://github.com/nuxt/nuxt/issues/13417",0.7310304,["Reactive",3140],{},["Set"],["ShallowReactive",3143],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3BRn1FccEDGhG3dHeJp0lPC4y6W_RLah35Rvcj33YRk":-1},"/nuxt/icon/68"]