\n\u003C/template>\n\u003Cscript setup>\nconst items = [\n { label: \"click for one\", onClick: () => alert(\"1\"), to: \"/one\" },\n { label: \"click for two\", onClick: () => alert(\"2\"), to: \"/two\" },\n]\n\u003C/script>\n```\n\nMy need is to have some secondary effects happening besides the navigation when the user clicks on a breadcrumb item.\n\n### Additional context\n\n_No response_",[2948,2949,2950],{"name":2868,"color":2869},{"name":2888,"color":2889},{"name":2871,"color":2872},3631,"Support for `onClick` event on Breadcrumb items","2025-03-24T18:08:16Z","https://github.com/nuxt/ui/issues/3631",0.6647663,{"description":2957,"labels":2958,"number":2961,"owner":2874,"repository":2875,"state":2891,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nIn my Nuxt 3 project (that uses Nuxt UI `v3.0.0-alpha9`), I have a Vue component like this:\n\n```vue\n\u003Cscript setup lang=\"ts\">\n...\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"section\">\n ...\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cstyle scoped lang=\"scss\">\n@use \"tailwindcss\";\n\n.section + .section {\n @apply mt-8 lg:mt-12;\n}\n\u003C/style>\n```\n\nThe problem is that `@apply mt-8 lg:mt-12;` doesn't work unless I add this to my `nuxt.config.ts`:\n```\npostcss: {\n plugins: {\n \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n },\n},\n```\n\nHowever, when I do this, the Nuxt UI components stop working properly (e.g., Slideover renders at the bottom of the page and with wrong styling). How can I make the `@apply ...` work without breaking the Nuxt UI components?\n\nThis is my `package.json`:\n```json\n{\n \"name\": \"frontend\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"postinstall\": \"husky install && nuxt prepare\",\n \"dev\": \"nuxt dev\",\n \"build\": \"nuxt build\",\n \"preview\": \"nuxt preview\"\n },\n \"dependencies\": {\n \"@nuxt/ui\": \"^3.0.0-alpha.9\",\n \"nuxt\": \"latest\",\n \"nuxt-svgo\": \"latest\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@commitlint/cli\": \"latest\",\n \"@commitlint/config-conventional\": \"latest\",\n \"husky\": \"latest\",\n \"sass\": \"latest\"\n }\n}\n```\n\nThis is my `nuxt.config.ts`:\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: \"2024-04-03\",\n devtools: { enabled: false },\n modules: [\"@nuxt/ui\", \"nuxt-svgo\"],\n css: [\"@/assets/css/main.css\"],\n // postcss: {\n // plugins: {\n // \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n // },\n // },\n appConfig: {\n // https://ui3.nuxt.dev/getting-started/theme#colors\n ui: {\n colors: {\n primary: \"primary\", // Defined in `assets/css/theme.css`\n secondary: \"secondary\", // Defined in `assets/css/theme.css`\n },\n },\n },\n});\n```\n\nThis is my `assets/main.css`:\n```css\n/* https://ui3.nuxt.dev/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css */\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```",[2959,2960],{"name":2885,"color":2886},{"name":2888,"color":2889},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.6648257,{"description":2967,"labels":2968,"number":2977,"owner":2874,"repository":2874,"state":2891,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### Environment\r\n`\u003Cimg src=\"~/assets/image/searchBg.jpg\" alt=\"\"/>`\r\n\r\nchunk-SOI3BFCQ.js?v=091eb3ff:1759 [Vue warn]: Hydration attribute mismatch on \u003Cimg src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\" alt> \r\n - rendered on server: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\"\r\n - expected on client: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632813\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/search\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/search?title=dd', hash: '', query: {…}, name: 'search', path: '/search', …} ... > \r\n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \r\n at \u003CTransition onAfterLeave= [ƒ] name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n### Reproduction\r\n\r\nchunk-SOI3BFCQ.js?v=091eb3ff:1759 [Vue warn]: Hydration attribute mismatch on \u003Cimg src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\" alt> \r\n - rendered on server: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\"\r\n - expected on client: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632813\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/search\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/search?title=dd', hash: '', query: {…}, name: 'search', path: '/search', …} ... > \r\n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \r\n at \u003CTransition onAfterLeave= [ƒ] name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n### Describe the bug\r\n\r\nchunk-SOI3BFCQ.js?v=091eb3ff:1759 [Vue warn]: Hydration attribute mismatch on \u003Cimg src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\" alt> \r\n - rendered on server: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\"\r\n - expected on client: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632813\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/search\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/search?title=dd', hash: '', query: {…}, name: 'search', path: '/search', …} ... > \r\n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \r\n at \u003CTransition onAfterLeave= [ƒ] name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n### Additional context\r\n\r\nchunk-SOI3BFCQ.js?v=091eb3ff:1759 [Vue warn]: Hydration attribute mismatch on \u003Cimg src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\" alt> \r\n - rendered on server: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\"\r\n - expected on client: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632813\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/search\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/search?title=dd', hash: '', query: {…}, name: 'search', path: '/search', …} ... > \r\n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \r\n at \u003CTransition onAfterLeave= [ƒ] name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n### Logs\r\n\r\n_No response_",[2969,2972,2973,2974],{"name":2970,"color":2971},"3.x","29bc7f",{"name":2915,"color":2916},{"name":2918,"color":2919},{"name":2975,"color":2976},"⛔️ can be closed","484893",25730,"Image error bug","2024-03-29T20:49:34Z","https://github.com/nuxt/nuxt/issues/25730",0.66607594,{"labels":2983,"number":2986,"owner":2874,"repository":2874,"state":2891,"title":2987,"updated_at":2988,"url":2989,"score":2990},[2984,2985],{"name":2970,"color":2971},{"name":2900,"color":2901},11998,"Hydration text mismatch","2023-01-19T16:03:31Z","https://github.com/nuxt/nuxt/issues/11998",0.6664026,["Reactive",2992],{},["Set"],["ShallowReactive",2995],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fCrS6VbyfNPsnMXBLB0RtflzUTJD9XymNRPNWtvfoByo":-1},"/nuxt/ui/3322"]