\r\n```\r\n\r\nhttps://github.com/nuxt-modules/icon/blob/0ae93b806f0633f9ee65599136655c0456ffed95/src/runtime/Icon.vue#L70-L73",[3156],{"name":3157,"color":3158},"question","d876e3",68,"icon","closed","TailwindCSS `hidden` class not hiding `Icon`","2023-08-07T18:00:28Z","https://github.com/nuxt/icon/issues/68",0.6411071,{"description":3167,"labels":3168,"number":3177,"owner":3146,"repository":3178,"state":3161,"title":3179,"updated_at":3180,"url":3181,"score":3182},"### 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",[3169,3172,3175],{"name":3170,"color":3171},"bug","d73a4a",{"name":3173,"color":3174},"closed-by-bot","ededed",{"name":3176,"color":3174},"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.72044796,{"labels":3184,"number":3191,"owner":3146,"repository":3146,"state":3161,"title":3192,"updated_at":3193,"url":3194,"score":3195},[3185,3188],{"name":3186,"color":3187},"3.x","29bc7f",{"name":3189,"color":3190},"pending triage","E99695",13385,"Cannot use Tailwindcss classes from composables","2023-01-19T16:54:19Z","https://github.com/nuxt/nuxt/issues/13385",0.7265814,{"description":3197,"labels":3198,"number":3204,"owner":3146,"repository":3146,"state":3161,"title":3205,"updated_at":3206,"url":3207,"score":3208},"### 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_",[3199,3200,3201],{"name":3186,"color":3187},{"name":3189,"color":3190},{"name":3202,"color":3203},"⛔️ 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.727096,{"description":3210,"labels":3211,"number":3218,"owner":3146,"repository":3178,"state":3161,"title":3219,"updated_at":3220,"url":3221,"score":3222},"I currently have the problem that we have to integrate our SPA into a larger application. And with that, we also inherit the CSS of the outer application. And that's where it gets really ugly: they have partially written classes in their own CSS files that use the TW naming scheme (m, p, gap, shadow, etc.), and then add `!important` to these declarations. \n\nOne of the big problems with Nuxt UI is that there is no prefixing of Tailwind classes. So we started writing TW utilities with a prefix for the affected classes. This is then transferred to app.config. The second problem was the merge process that app.config uses. Usually the names have to match. If I want to have a `p-4` from the config (because px values with !important were entered in the outer CSS), I created the class `p-00`, which replaces the `p-4` class and thus clears the way for the prefixed TW class `o-p-4`.\n\nSo far so good, but I can't use it with popovers like SelectMenu. No matter what I do, the class `shadow-lg` remains. The other devs of the main application have entered a rather ugly shadow with important there. \n\nIs there another prop like 'content' that I can use to replace `shadow-lg`? I'm not a fan of `!important`, but at this point I can only work this way.\n\nFurthermore, it would be really nice if you could really overwrite the sections in app.config instead of just merging them (apart from prefixing the TW classes). There are certain stylings that you won't use, but then they are in the element",[3212,3213,3216,3217],{"name":3157,"color":3158},{"name":3214,"color":3215},"v3","49DCB8",{"name":3173,"color":3174},{"name":3176,"color":3174},3874,"Changing Shadow Classes on Popover and SelectMenu","2025-08-12T02:12:50Z","https://github.com/nuxt/ui/issues/3874",0.727836,{"labels":3224,"number":3229,"owner":3146,"repository":3146,"state":3161,"title":3230,"updated_at":3231,"url":3232,"score":3233},[3225,3226],{"name":3189,"color":3190},{"name":3227,"color":3228},"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.7289985,{"labels":3235,"number":3240,"owner":3146,"repository":3146,"state":3161,"title":3241,"updated_at":3242,"url":3243,"score":3244},[3236,3239],{"name":3237,"color":3238},"enhancement","8DEF37",{"name":3227,"color":3228},7666,"NuxtLink `inactive-class` attribute","2024-06-14T16:04:23Z","https://github.com/nuxt/nuxt/issues/7666",0.72923017,{"description":3246,"labels":3247,"number":3254,"owner":3146,"repository":3178,"state":3161,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### 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_",[3248,3249,3252,3253],{"name":3170,"color":3171},{"name":3250,"color":3251},"triage","ffffff",{"name":3173,"color":3174},{"name":3176,"color":3174},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.74471164,{"labels":3260,"number":3263,"owner":3146,"repository":3146,"state":3161,"title":3264,"updated_at":3265,"url":3266,"score":3267},[3261,3262],{"name":3189,"color":3190},{"name":3227,"color":3228},9451,"Where is tailwind css ?!?","2023-01-22T15:44:58Z","https://github.com/nuxt/nuxt/issues/9451",0.74840546,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fezYhyvJ7RpKN9Uy5rhYLF2vN4sEYOXLUgNmrC_oLpu8":-1},"/nuxt/icon/108"]