\n\u003C/template>\n\n\u003Cscript setup>\nconst translationField = ref(null)\n\nfunction nextCard() {\n translationField.value.focus() // throws: 'focus is not a function'\n \n nextTick(() => {\n translationField.value.focus() // same error\n })\n\n // below works ok\n nextTick(() => {\n const input = translationField.value?.$el?.querySelector('input')\n if (input) {\n input.focus()\n }\n })\n}\n\u003C/script>\n```\n\n\n### Description\nStandard Vue method of using template ref (for setting a focus, here) throws: 'focus() is not a function'\nIn the above code snippet I included workaround (credits to Sonnet 3.5)\nTried it dozen of times and checked this place to see if it has not been solved earlier.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3207,3210,3211],{"name":3208,"color":3209},"bug","d73a4a",{"name":3181,"color":3182},{"name":3184,"color":3185},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.68708366,{"description":3218,"labels":3219,"number":3220,"owner":3146,"repository":3146,"state":3161,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Environment\n\nIt's not particularly relevant to the docs y'all host, but if you want to know, here's my environment info:\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.12.1`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `title`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://nuxt.com/modules/i18n\r\nhttps://nuxt.com/modules/tailwindcss\n\n### Describe the bug\n\nCode snippets' text is in a mid-to-dark grey, dark blue, and dark orange on a black background making them neigh impossible to read. (The bright blue `>` prompts on the black background also cause my eyes to wig out a bit, but that might just be me. The contrast definitely isn't.)\r\n\r\n\u003Cimg width=\"1456\" alt=\"lighthouse\" src=\"https://user-images.githubusercontent.com/7552754/206815045-19717335-9107-4f9e-9989-ee0a233f1227.png\">\r\n\r\n\r\n\r\n\r\n\n\n### Additional context\n\nThis is happening in both Firefox 107.0.1 and Chrome 108.0.5359.98 on macOS 10.15.7 with the operating system set to \"Light\" Appearance.\n\n### Logs\n\n_No response_",[],15823,"Module Docs: Almost no contrast on code snippets","2023-01-20T14:16:02Z","https://github.com/nuxt/nuxt/issues/15823",0.69893223,{"description":3218,"labels":3226,"number":3239,"owner":3146,"repository":3146,"state":3161,"title":3221,"updated_at":3240,"url":3241,"score":3242},[3227,3230,3233,3236],{"name":3228,"color":3229},"documentation","5319e7",{"name":3231,"color":3232},"3.x","29bc7f",{"name":3234,"color":3235},"pending triage","E99695",{"name":3237,"color":3238},"⛔️ can be closed","484893",15619,"2023-02-14T08:34:55Z","https://github.com/nuxt/nuxt/issues/15619",0.6997501,{"description":3244,"labels":3245,"number":3247,"owner":3146,"repository":3187,"state":3161,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Description\n\nI just tried the example about autoplay in [UCarousel](https://ui.nuxt.com/components/carousel#autoplay), but with TypeScript. \n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n images: string[];\n}>();\n\nconst carousel = useTemplateRef('carouselGallery');\n\nonMounted(() => {\n setInterval(() => {\n if (!carousel.value) return;\n\n if (carousel.value.page === carousel.value.pages) {\n return carousel.value.select(0);\n }\n\n carousel.value.next();\n }, 5000);\n});\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUCarousel\n ref=\"carouselGallery\"\n v-slot=\"{ item }\"\n :items=\"props.images\"\n :ui=\"{\n item: 'basis-full',\n indicators: { wrapper: 'bg-black/70 w-min px-2.5 py-1.5 gap-1 left-4 rounded-xl' },\n }\"\n class=\"overflow-hidden\"\n indicators\n >\n \u003Cimg :src=\"item\" class=\"w-full\" draggable=\"true\" />\n \u003C/UCarousel>\n\u003C/template>\n```\n\nAnd I get some TypeScript errors:\n\nProperty 'page' does not exist on type 'CreateComponentPublicInstanceWithMixins(...)\nProperty 'select' does not exist on type 'CreateComponentPublicInstanceWithMixins(...)\nProperty 'next' does not exist on type 'CreateComponentPublicInstanceWithMixins(...)\n\nHow should I correctly infer the type for UCarousel?\n\nNuxt v3.15.1\nNuxtUI v2.20.0",[3246],{"name":3196,"color":3197},3053,"How to properly use UCarousel API with TypeScript","2025-04-22T13:44:43Z","https://github.com/nuxt/ui/issues/3053",0.70312715,{"description":3253,"labels":3254,"number":3257,"owner":3146,"repository":3187,"state":3161,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### 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```",[3255,3256],{"name":3196,"color":3197},{"name":3181,"color":3182},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.7048884,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1btt_NCtHS2ZZmvx-NJvvaDaeyN9wDV8YpenvSBoaJs":-1},"/nuxt/ui/2282"]