\r\n \u003C/div>\r\n\r\n \u003Cdiv>\r\n \u003Ch2 class=\"text-lg font-semibold my-0\">\r\n \u003CContentSlot :use=\"$slots.title\" unwrap=\"p\" />\r\n \u003C/h2>\r\n\r\n \u003Cp class=\"text-gray-500 dark:text-gray-400 text-base mt-1 mb-0\">\r\n \u003CContentSlot :use=\"$slots.description\" unwrap=\"p\" />\r\n \u003C/p>\r\n \u003C/div>\r\n \u003C/div>\r\n```\r\n**My Solution**\r\n```\r\n\u003Cdiv class=\"flex flex-col sm:flex-row items-center gap-4 mb-8\">\r\n \u003Cdiv class=\"w-14 h-14 bg-gray-100 dark:bg-gray-800 ring-1 shrink-0 ring-gray-300 dark:ring-gray-700 rounded-md flex items-center justify-center\">\r\n \u003CUIcon :name=\"icon\" class=\"w-8 h-8\" />\r\n \u003C/div>\r\n\r\n \u003Cdiv>\r\n \u003Ch2 class=\"text-lg font-semibold my-0\">\r\n \u003CContentSlot :use=\"$slots.title\" unwrap=\"p\" />\r\n \u003C/h2>\r\n\r\n \u003Cp class=\"text-gray-500 dark:text-gray-400 text-base mt-1 mb-0\">\r\n \u003CContentSlot :use=\"$slots.description\" unwrap=\"p\" />\r\n \u003C/p>\r\n \u003C/div>\r\n \u003C/div>\r\n```\r\n**Example 1:**\r\n[\r\n\r\n](url)\r\n\r\n**Example 2**\r\n\r\n\r\n**After Solution**\r\n\r\n\r\nShould I create a pull req?\r\n\r\n\r\n\n```[tasklist]\n### Tasks\n```\n",[],1399,"nuxt.com","closed","Icons Shrinking below 900px width and in Tablet View(768) on enterprise support page","2023-10-27T09:01:27Z","https://github.com/nuxt/nuxt.com/issues/1399",0.65652466,{"description":2938,"labels":2939,"number":2941,"owner":2905,"repository":2922,"state":2932,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.5\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: devtools, modules\n- Runtime Modules: @nuxt/ui@2.21.0\n- Build Modules: -\n------------------------------\n\n### Version\n\nv2.21.0\n\n### Reproduction\n\nhttps://stackblitz.com/github/nuxt/starter/tree/ui?file=package.json\n\n### Description\n\n`npm run build` on the latest nuxt v3.16 on UI v2.21.0 throws the following error:\n\n`[17:41:35] ERROR .nuxt/dist/server/node_modules/_nuxt/ui/dist/runtime/components/elements/Link.vue.mjs (2:18): \"diff\" is not exported by \"node_modules/ohash/dist/index.mjs\", imported by \".nuxt/dist/server/node_modules/_nuxt/ui/dist/runtime/components/elements/Link.vue.mjs\".`",[2940],{"name":2916,"color":2917},3486,"Generating a production build with nuxt `3.16` throws `ohash` error","2025-03-12T09:19:23Z","https://github.com/nuxt/ui/issues/3486",0.6628203,{"description":2947,"labels":2948,"number":2949,"owner":2905,"repository":2931,"state":2932,"title":2950,"updated_at":2951,"url":2952,"score":2953},"Open https://nuxt.com/docs/guide/directory-structure/composables, **Introduction** page is shown instead of **Composables**\n\n\n\nI think the regression is due to 43b0f43",[],1752,"All docs/[...slug] routes show Introduction page","2025-01-14T11:25:53Z","https://github.com/nuxt/nuxt.com/issues/1752",0.6682233,{"description":2955,"labels":2956,"number":2963,"owner":2905,"repository":2922,"state":2932,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\n[CommandPalette](https://ui3.nuxt.dev/components/command-palette) is great but I wish it could display only an input by default and then open the content in a popper when clicking in the input. I think this is currently not possible but a very common use case. \n\nThis is what I would like to archive, screenshots from Shopify:\n\n\n\n\n\n\n\n### Additional context\n\n_No response_",[2957,2960],{"name":2958,"color":2959},"enhancement","a2eeef",{"name":2961,"color":2962},"v3","49DCB8",2832,"v3 CommandPalette: Open only content within popper","2024-12-05T13:24:12Z","https://github.com/nuxt/ui/issues/2832",0.6806777,{"labels":2969,"number":2979,"owner":2905,"repository":2905,"state":2932,"title":2980,"updated_at":2981,"url":2982,"score":2983},[2970,2973,2976],{"name":2971,"color":2972},"3.x","29bc7f",{"name":2974,"color":2975},"pending triage","E99695",{"name":2977,"color":2978},"needs reproduction","FBCA04",12986,"VITE SyntaxError @babel does not provide an export named 'default'","2023-01-19T16:39:58Z","https://github.com/nuxt/nuxt/issues/12986",0.68102676,{"description":2985,"labels":2986,"number":2991,"owner":2905,"repository":2922,"state":2932,"title":2992,"updated_at":2993,"url":2994,"score":2995},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.5.1\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2\n- Build Modules: -\n\n### Version\n\n2.19.2\n\n### Reproduction\n\n- create blank nuxt project with nuxt-ui module\n- add to page some buttons\n```\n\u003Cdiv>\n \u003CUButton icon=\"i-heroicons:plus-20-solid\">Add\u003C/UButton>\n \u003CUButton icon=\"ic:baseline-minus\">Remove\u003C/UButton>\n \u003CUButton>Clear\u003C/UButton>\n\u003C/div>\n```\n\n### Description\n\nButtons with icons (no matter icon set) jumping up raltive to clean text button\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2987,2988],{"name":2916,"color":2917},{"name":2989,"color":2990},"duplicate","cfd3d7",2805,"UButton icon breaks button position","2024-12-03T11:21:27Z","https://github.com/nuxt/ui/issues/2805",0.68877333,{"labels":2997,"number":3003,"owner":2905,"repository":2905,"state":2932,"title":3004,"updated_at":3005,"url":3006,"score":3007},[2998,2999,3000],{"name":2971,"color":2972},{"name":2916,"color":2917},{"name":3001,"color":3002},"vite","3574D1",13196,"exports is not defined and m.default is not a function","2023-01-19T16:48:32Z","https://github.com/nuxt/nuxt/issues/13196",0.6931864,{"description":3009,"labels":3010,"number":3015,"owner":2905,"repository":2922,"state":2932,"title":3016,"updated_at":3017,"url":3018,"score":3019},"### 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```",[3011,3014],{"name":3012,"color":3013},"question","d876e3",{"name":2961,"color":2962},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.6937916,["Reactive",3021],{},["Set"],["ShallowReactive",3024],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fmRA7yg_PWSIZNjU0bBwKtDyA-tmYsAowqHUdH4yLdYg":-1},"/nuxt/ui/3552"]