\" },\r\n \"b\": { \"body\": \"\u003Cpath d=\\\"_path_b_\\\"/>\" },\r\n \"c\": { \"body\": \"\u003Cpath d=\\\"_path_c_\\\"/>\" }\r\n },\r\n \"width\": 24,\r\n \"height\": 24,\r\n}\r\n```\r\n\r\nExample API response to `GET /api/iconify-provider/my-icons.json?icons=a,c`\r\n```json\r\n{\r\n \"prefix\": \"my-icons\",\r\n \"icons\": {\r\n \"a\": { \"body\": \"\u003Cpath d=\\\"_path_a_\\\"/>\" },\r\n \"c\": { \"body\": \"\u003Cpath d=\\\"_path_c_\\\"/>\" }\r\n },\r\n \"width\": 24,\r\n \"height\": 24,\r\n}\r\n```\r\n\r\nModule would have to register the custom provider with iconify library:\r\n```ts\r\nimport { addAPIProvider } from '@iconify/vue'\r\naddAPIProvider('nuxt', { resources: ['/api/iconify-provider'] })\r\n```\r\n\r\nAnd the icons should be usable as per example:\r\n```html\r\n\u003Cicon name=\"@nuxt:my-icons:a\"/>\r\n\u003Cicon name=\"@nuxt:my-icons:c\"/>\r\n```",[],97,"icon","Feature Request: Built-in API provider for custom IconifyJSON","2024-10-25T16:58:25Z","https://github.com/nuxt/icon/issues/97",0.7033077,{"description":2026,"labels":2027,"number":2031,"owner":1991,"repository":1991,"state":2011,"title":2032,"updated_at":2033,"url":2034,"score":2035},"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>",[2028],{"name":2029,"color":2030},"2.x","d4c5f9",2273,"Integrating TailwindCSS into Nuxt SFC ","2023-01-18T15:43:52Z","https://github.com/nuxt/nuxt/issues/2273",0.7182488,{"description":2037,"labels":2038,"number":2045,"owner":1991,"repository":1991,"state":2011,"title":2046,"updated_at":2047,"url":2048,"score":2049},"I develop a website that runs with Nuxt 3.13.2, DaisyUI and TailwindCSS with bunch of nuxt modules, kindly please check the package.json details below:\n\n```\n{\n \"name\": \"the-website\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate --modern\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\"\n },\n \"dependencies\": {\n \"@nuxt/image\": \"^1.8.1\",\n \"@nuxtjs/google-fonts\": \"^3.2.0\",\n \"@nuxtjs/i18n\": \"^8.3.3\",\n \"@nuxtjs/seo\": \"^2.0.0-rc.15\",\n \"@nuxtjs/tailwindcss\": \"^6.12.0\",\n \"@vee-validate/nuxt\": \"^4.13.2\",\n \"@vee-validate/yup\": \"^4.13.2\",\n \"@vueuse/core\": \"^11.1.0\",\n \"@vueuse/nuxt\": \"^11.1.0\",\n \"nuxt\": \"^3.13.2\",\n \"nuxt-booster\": \"^3.1.5\",\n \"nuxt-icons\": \"^3.2.1\",\n \"nuxt-mail\": \"^5.0.1\",\n \"nuxt-marquee\": \"^1.0.4\",\n \"nuxt-snackbar\": \"^1.0.4\",\n \"sass\": \"^1.77.5\",\n \"vue\": \"^3.4.27\",\n \"vue-countup-v3\": \"^1.4.2\",\n \"vue-router\": \"^4.3.3\",\n \"yup\": \"^1.4.0\"\n },\n \"devDependencies\": {\n \"@egoist/tailwindcss-icons\": \"^1.8.1\",\n \"@iconify/json\": \"^2.2.218\",\n \"@tailwindcss/forms\": \"^0.5.7\",\n \"@tailwindcss/typography\": \"^0.5.13\",\n \"daisyui\": \"^4.12.2\",\n \"nuxt-aos\": \"^1.2.5\"\n },\n \"packageManager\": \"yarn@4.4.1\"\n}\n```\n\nnuxt.config.ts:\n```\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n $production: {\n devtools: { enabled: false },\n },\n\n ssr: true,\n devtools: { enabled: true },\n\n app: {\n head: {\n titleTemplate: '%s %separator WSoft Labs',\n meta: [\n {\n \"name\": \"viewport\",\n \"content\": \"width=device-width, initial-scale=1\"\n },\n {\n \"charset\": \"utf-8\"\n }\n ],\n link: [\n {\n rel: 'icon',\n href: '/favicon.ico'\n }\n ]\n }\n },\n\n runtimeConfig: {\n // apiSecret: '', // can be overridden by NUXT_API_SECRET environment variable\n public: {\n baseURL: process.env.NUXT_BASE_URL ?? 'http://localhost:3000',\n apiBase: process.env.NUXT_API_BASE ?? 'http://localhost:8000/api', // can be overridden by NUXT_PUBLIC_API_BASE environment variable\n apiUrl: process.env.NUXT_API_URL ?? 'http://localhost:8000',\n }\n },\n\n imports: {\n dirs: [\n // Scan top-level modules\n 'composables',\n // ... or scan modules nested one level deep with a specific name and file extension\n 'composables/*/index.{ts,js,mjs,mts}',\n // ... or scan all modules within given directory\n 'composables/**',\n 'utils/**'\n ]\n },\n\n components: [\n {\n path: './components',\n extensions: ['.vue'],\n pathPrefix: false\n }\n ],\n\n modules: [\n '@nuxtjs/tailwindcss',\n 'nuxt-snackbar',\n 'nuxt-icons',\n 'nuxt-marquee',\n '@vee-validate/nuxt',\n 'nuxt-aos',\n '@nuxtjs/i18n',\n '@nuxtjs/seo',\n 'nuxt-booster',\n '@nuxt/image',\n '@nuxtjs/google-fonts',\n '@vueuse/nuxt',\n [\n 'nuxt-mail', {\n message: {\n to: process.env.NUXT_MAIL_TO,\n },\n smtp: {\n host: process.env.NUXT_MAIL_SMTP,\n port: process.env.NUXT_MAIL_PORT ?? 25,\n secure: process.env.NUXT_MAIL_SMTP_SECURE ?? false,\n auth: {\n user: process.env.NUXT_MAIL_USER,\n pass: process.env.NUXT_MAIL_PASSWORD,\n }\n },\n }\n ],\n ],\n\n build: {\n transpile: ['vue-countup-v3'],\n },\n\n tailwindcss: {\n cssPath: [\n '~/assets/scss/main.scss',\n {\n injectPosition: 'first'\n }\n ],\n configPath: 'tailwind.config',\n exposeConfig: {\n level: 2\n },\n config: {},\n viewer: true,\n editorSupport: true\n },\n\n css: [\n \"@/assets/scss/main.scss\",\n ],\n\n snackbar: {\n top: true,\n right: true,\n duration: 5000\n },\n\n veeValidate: {\n autoImports: true,\n componentNames: {\n Form: 'VeeForm',\n Field: 'VeeField',\n FieldArray: 'VeeFieldArray',\n ErrorMessage: 'VeeErrorMessage',\n },\n },\n\n i18n: {\n locales: [\n {\n code: 'en',\n language: 'en-US',\n name: 'English',\n file: 'en-US.js'\n },\n {\n code: 'kr',\n language: 'kr-KR',\n name: 'Korean',\n file: 'kr-KR.js'\n },\n ],\n defaultLocale: 'kr',\n lazy: true,\n langDir: 'lang',\n compilation: {\n strictMessage: false\n },\n detectBrowserLanguage: {\n useCookie: true,\n cookieKey: 'wsoftlabs_i18n_redirected',\n alwaysRedirect: true,\n fallbackLocale: 'en',\n },\n },\n\n booster: {\n detection: {\n performance: true,\n browserSupport: true,\n battery: true,\n },\n performanceMetrics: {\n timing: {\n fcp: 800,\n dcl: 1200\n }\n }\n },\n\n image: {\n screens: {\n default: 320,\n xxs: 480,\n xs: 576,\n sm: 768,\n md: 996,\n lg: 1200,\n xl: 1367,\n xxl: 1600,\n '4k': 1921\n },\n provider: \"ipx\",\n dir: \"assets\"\n },\n\n googleFonts: {\n families: {\n Poppins: {\n wght: [100, 200, 300, 400, 500, 600, 700, 800, 900],\n ital: [100, 200, 300, 400, 500, 600, 700, 800, 900],\n }\n },\n display: 'swap',\n prefetch: false,\n preconnect: false,\n preload: false,\n download: true,\n base64: true,\n overwriting: true,\n },\n\n compatibilityDate: '2024-10-14'\n})\n```\n\nmy issue is when I try to run it via dev server via `yarn dev`, it will not show a warning for hydration mismatches:\n\n[![running in yarn dev][1]][1]\n\nbut when I do run `yarn generate && yarn preview`, it does show the said error:\n\n[![running in yarn generate][2]][2]\n\nwith this current `app.vue` codebase:\n\n[![prev. ClientOnly placement][3]][3]\n\n\nNow, I did a workaround and trying to tweak `ClientOnly` component to move the wrap and include the `NuxtLayout` component\n\n[![curr. ClientOnly placement][4]][4]\n\nafter then, I re-run `yarn generate && yarn preview`, the hydration error is gone but my images is now not working anymore.\n\n[![enter image description here][5]][5]\n\nbut when I run the workaround with `yarn dev`, it has the same result as the first screenshot (no hydration mismatches warnings/errors).\n\nI'm running a module called `nuxt-image` to optimize the images on load when uploaded to the server and `nuxt-booster` to boost the SEO-related things of the app.\n\nhere's my [repo][6] for further details and do some workaround about it, please do leave some comments/suggestions/guidance/help with the repo as a form of help will be much appreciated in order to improve the overall project and most importantly, myself.\n\n\n [1]: https://i.sstatic.net/AzYGTJ8J.png\n [2]: https://i.sstatic.net/JzzVXt2C.png\n [3]: https://i.sstatic.net/bZJL5luU.png\n [4]: https://i.sstatic.net/TyT166Jj.png\n [5]: https://i.sstatic.net/kZ6XfSmb.png\n [6]: https://github.com/noelc10/wsl-website",[2039,2042],{"name":2040,"color":2041},"pending triage","E99695",{"name":2043,"color":2044},"needs reproduction","FBCA04",29704,"Nuxt 3.13.2: nuxt generate build hydration completed but contains mismatches errors","2025-03-24T23:15:34Z","https://github.com/nuxt/nuxt/issues/29704",0.71967846,{"description":2051,"labels":2052,"number":2053,"owner":1991,"repository":2020,"state":2011,"title":2054,"updated_at":2055,"url":2056,"score":2057},"Nuxt-Icon currently follows `mdi:home` which is `iconify` format. \r\n\r\nNuxtlabs/ui follows `i-mdi-home` which is `unocss` format.\r\n\r\nIcones, unocss support using multiple formats. \r\n\r\n\r\nWould be great to have support to use `unocss` format in Nuxt-Icon in addition to the current `iconify` format, so that it can be used when working on other libraries which uses the \"unocss\" format. ",[],84,"Feature Request - support for i-mdi-home \"unocss\" format","2023-08-07T11:39:28Z","https://github.com/nuxt/icon/issues/84",0.7211686,{"description":2059,"labels":2060,"number":2068,"owner":1991,"repository":1991,"state":2011,"title":2069,"updated_at":2070,"url":2071,"score":2072},"### 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_",[2061,2064,2065],{"name":2062,"color":2063},"3.x","29bc7f",{"name":2040,"color":2041},{"name":2066,"color":2067},"⛔️ 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.72972035,{"description":2074,"labels":2075,"number":2078,"owner":1991,"repository":1991,"state":2011,"title":2079,"updated_at":2080,"url":2081,"score":2082},"### Environment\n\n```\n- Operating System: Linux\n- Node Version: v22.12.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/content@3.0.0-alpha.8, @nuxt/eslint@0.7.4, @nuxt/ui@3.0.0-alpha.10\n- Build Modules: -\n```\n\n### Reproduction\n\nTried to make a repro on stackblitz:\n```\ne/projects/github-9jngg6tm/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node\n\nnpm ERR! code 1\nnpm ERR! path /home/projects/github-9jngg6tm\nnpm ERR! command failed\nnpm ERR! command sh -c nuxt prepare\n\nnpm ERR! A complete log of this run can be found in: /home/.npm/_logs/2024-12-23T16_24_38_034Z-debug-0.log\n```\n\nTried on Codesandbox: \"couldn't start MicroVM\"\n\n### Describe the bug\n\nTailwind in general is working fine for layout classes. However if I use a class like `drop-shadow-lg` it does not have an impact as it seems some variables are undefined.\n\n\u003Cimg width=\"328\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/1678ab42-b682-416b-9606-2d8605c837a1\" />\n\nPerhaps related, I'm seeing these warnings when building:\n\n```\n[vite:css] Lexical error on line 1: Unrecognized text. 4:12:25 PM\n\n Erroneous area:\n1: infinity * 1px\n^..^\n945| }\n946| .rounded-full {\n947| border-radius: calc(infinity * 1px);\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n948| }\n949| .rounded-s { (x2)\n\nℹ ✓ 227 modules transformed. 4:12:26 PM\n[plugin @tailwindcss/vite:generate:build] Sourcemap is likely to be incorrect: a plugin (@tailwindcss/vite:generate:build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help\n```\n\nIn `nuxt.config.ts` I have this:\n`css: [\"~/assets/css/main.css\"]`\n\nIn `main.css` I have this:\n\n```\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```\n\n### Additional context\n\nI'm new to vue/nuxt/tailwind so it's entirely possible I'm doing something wrong.\n\n### Logs\n\n```shell-script\n\n```",[2076,2077],{"name":2040,"color":2041},{"name":2043,"color":2044},30345,"undefined tailwind variables, css sourcemap warnings","2024-12-23T18:18:48Z","https://github.com/nuxt/nuxt/issues/30345",0.7363679,{"labels":2084,"number":2086,"owner":1991,"repository":1991,"state":2011,"title":2087,"updated_at":2088,"url":2089,"score":2090},[2085],{"name":2062,"color":2063},11875,"TailwindCSS only works on client-side","2023-01-19T15:48:25Z","https://github.com/nuxt/nuxt/issues/11875",0.7396135,{"labels":2092,"number":2098,"owner":1991,"repository":1991,"state":2011,"title":2099,"updated_at":2100,"url":2101,"score":2102},[2093,2096,2097],{"name":2094,"color":2095},"good first issue","fbca04",{"name":2040,"color":2041},{"name":2029,"color":2030},7062,"tailwindcss-purgecss example is not more up to date","2023-01-22T15:34:48Z","https://github.com/nuxt/nuxt/issues/7062",0.7407741,["Reactive",2104],{},["Set"],["ShallowReactive",2107],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"qAcJ7vZrbrTWI2t-5bWlvnVHm5xZD8_tvDNiqN6gUiA":-1},"/nuxt/nuxt.com/57"]