N
Nuxt•3mo ago
thejacer87

nuxt ui and nuxt ui-pro with nuxt 4 compatibility

has anyone else got nuxt ui to work with nuxt 4? i assumed since nuxt 4 is so close that nuxt ui would work but i am getting a few error: 
 ERROR  Pre-transform error: [postcss] postcss-import: /my-app/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/index.js:1:1: Unknown word "use strict"
  Plugin: vite:css
  File: /mp-app/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/index.js:1:0
  1  |  "use strict";
     |  ^
  2  |  module.exports = require("./plugin");
  3  |  
 ERROR  Pre-transform error: [postcss] postcss-import: /my-app/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/index.js:1:1: Unknown word "use strict"
  Plugin: vite:css
  File: /mp-app/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/index.js:1:0
  1  |  "use strict";
     |  ^
  2  |  module.exports = require("./plugin");
  3  |
and 
 ERROR  Cannot read properties of undefined (reading 'theme')                                                                                                         nuxt 1:29:56 p.m.

    at pageAnchors (/my-app/node_modules/.pnpm/@nuxt+ui-pro@3.2.0_@babel+parser@7.28.0_db0@0.3.2_embla-carousel@8.6.0_ioredis@5.6.1_jw_71c4726e2cdca85750586fc6c1e69eab/node_modules/@nuxt/ui-pro/dist/shared/ui-pro.CsgJ05mi.mjs:668:69)
    at Object.getContents (/my-app/node_modules/.pnpm/@nuxt+ui-pro@3.2.0_@babel+parser@7.28.0_db0@0.3.2_embla-carousel@8.6.0_ioredis@5.6.1_jw_71c4726e2cdca85750586fc6c1e69eab/node_modules/@nuxt/ui-pro/dist/shared/ui-pro.CsgJ05mi.mjs:2256:59)
    at futureCompileTemplate (/my-app/node_modules/.pnpm/nuxt@3.17.6_@parcel+watcher@2.5.1_@types+node@22.16.0_@vue+compiler-sfc@3.5.17_db0@0.3._49b919a0582b165ab9b7d7a01d863c54/node_modules/nuxt/dist/shared/nuxt.eh7VvbqR.mjs:6795:21)
    at processTemplate (/my-app/node_modules/.pnpm/nuxt@3.17.6_@parcel+watcher@2.5.1_@types+node@22.16.0_@vue+compiler-sfc@3.5.17_db0@0.3._49b919a0582b165ab9b7d7a01d863c54/node_modules/nuxt/dist/shared/nuxt.eh7VvbqR.mjs:6747:28)
    at Array.map (<anonymous>)
    at generateApp (/my-...

 
 ERROR  Cannot read properties of undefined (reading 'theme')                                                                                                         nuxt 1:29:56 p.m.

    at pageAnchors (/my-app/node_modules/.pnpm/@nuxt+ui-pro@3.2.0_@babel+parser@7.28.0_db0@0.3.2_embla-carousel@8.6.0_ioredis@5.6.1_jw_71c4726e2cdca85750586fc6c1e69eab/node_modules/@nuxt/ui-pro/dist/shared/ui-pro.CsgJ05mi.mjs:668:69)
    at Object.getContents (/my-app/node_modules/.pnpm/@nuxt+ui-pro@3.2.0_@babel+parser@7.28.0_db0@0.3.2_embla-carousel@8.6.0_ioredis@5.6.1_jw_71c4726e2cdca85750586fc6c1e69eab/node_modules/@nuxt/ui-pro/dist/shared/ui-pro.CsgJ05mi.mjs:2256:59)
    at futureCompileTemplate (/my-app/node_modules/.pnpm/nuxt@3.17.6_@parcel+watcher@2.5.1_@types+node@22.16.0_@vue+compiler-sfc@3.5.17_db0@0.3._49b919a0582b165ab9b7d7a01d863c54/node_modules/nuxt/dist/shared/nuxt.eh7VvbqR.mjs:6795:21)
    at processTemplate (/my-app/node_modules/.pnpm/nuxt@3.17.6_@parcel+watcher@2.5.1_@types+node@22.16.0_@vue+compiler-sfc@3.5.17_db0@0.3._49b919a0582b165ab9b7d7a01d863c54/node_modules/nuxt/dist/shared/nuxt.eh7VvbqR.mjs:6747:28)
    at Array.map (<anonymous>)
    at generateApp (/my-...
8 Replies
kapa.ai
kapa.ai•3mo ago
Hi @thejacer87. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, Nuxt UI and Nuxt UI Pro are designed to work with Nuxt 3 and have recently adopted Tailwind CSS v4, which uses a CSS-first configuration approach. For Nuxt 4 compatibility, you should ensure the following: 1. Tailwind CSS v4: Nuxt UI v3 and Nuxt UI Pro v3 require Tailwind CSS v4. You should not use Tailwind CSS v3.x, as shown in your error logs. Make sure your main.css (or equivalent) imports Tailwind CSS and the correct Nuxt UI package: 
   @import "tailwindcss";
   @import "@nuxt/ui-pro"; /* or @nuxt/ui if not using Pro */
   
   @import "tailwindcss";
   @import "@nuxt/ui-pro"; /* or @nuxt/ui if not using Pro */
And in your nuxt.config.ts: 
   export default defineNuxtConfig({
     modules: ['@nuxt/ui-pro'], // or '@nuxt/ui'
     css: ['~/assets/css/main.css'],
     future: {
       compatibilityVersion: 4
     }
   })
   
   export default defineNuxtConfig({
     modules: ['@nuxt/ui-pro'], // or '@nuxt/ui'
     css: ['~/assets/css/main.css'],
     future: {
       compatibilityVersion: 4
     }
   })
Nuxt UI Pro Installation Guide
Theme Customization 2. Directory Structure: With Nuxt 4 compatibility, your assets should be in the app/assets/ directory, and you should use the future: { compatibilityVersion: 4 } flag in your config. The ~ alias resolves to your srcDir, which is app/ by default in Nuxt 4 mode.
GitHub Issue: Nuxt 4 Compatibility 3. Remove Old Tailwind Config: Tailwind v4 with Nuxt UI v3+ no longer uses a tailwind.config.ts file. All theming is done via the @theme directive in your CSS.
Migration Guide 4. Upgrade All Packages: Ensure you are using the latest versions of @nuxt/ui or @nuxt/ui-pro and Tailwind CSS v4. If you see errors referencing Tailwind v3, you likely have an old version installed. 5. Error: Unknown word "use strict": This error typically means you are using an incompatible version of Tailwind CSS (v3.x) with Nuxt UI v3, which expects v4. Upgrade Tailwind CSS to v4. 6. Error: Cannot read properties of undefined (reading 'theme'): This may occur if the theme configuration is missing or not set up correctly. Ensure you are using the new CSS-first theming approach and not relying on a removed tailwind.config.ts. Summary:
Nuxt UI and Nuxt UI Pro v3+ are compatible with Nuxt 4 (compatibility mode) as long as you use Tailwind CSS v4, update your directory structure, and follow the new CSS-first theming approach. Double-check your package versions and configuration files to resolve the errors you are seeing. If you follow the official migration and installation guides, Nuxt UI should work with Nuxt 4 compatibility mode. If you still encounter issues, ensure all dependencies are up to date and your configuration matches the latest documentation. Nuxt UI Pro Installation Guide
Migration Guide
Theme Customization
GitHub Issue: Nuxt 4 Compatibility ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@291389486720352266> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
thejacer87
thejacer87OP•3mo ago
@kapa.ai i have followed the upgrade guides and there is no mention of how to make sure tailwind is up to date, here is my package.json and nuxt.config.ts 
{
  "name": "codes",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --port 3001",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui-pro": "^3.2.0",
    "nuxt": "^3.17.6",
    "vue": "^3.5.17",
    "vue-router": "^4.5.1"
  }
}
{
  "name": "codes",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --port 3001",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui-pro": "^3.2.0",
    "nuxt": "^3.17.6",
    "vue": "^3.5.17",
    "vue-router": "^4.5.1"
  }
}
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  future: {
    compatibilityVersion: 4,
  },
  devtools: { enabled: true },
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  future: {
    compatibilityVersion: 4,
  },
  devtools: { enabled: true },
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
})
kapa.ai
kapa.ai•3mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- To ensure Tailwind CSS is up to date and compatible with Nuxt UI Pro v3 and Nuxt 4 compatibility mode, you need to explicitly install Tailwind CSS v4 as a dependency in your project. The upgrade and installation guides for Nuxt UI Pro and Nuxt UI mention that Tailwind CSS v4 is required, but they do not always show the exact command to install or upgrade Tailwind CSS in your package.json Theme Customization Migration Guide. What you should do: 1. Install Tailwind CSS v4
Run the following command in your project directory to add the latest Tailwind CSS v4: 
   npm install tailwindcss@latest
   
   npm install tailwindcss@latest
or, if you use pnpm: 
   pnpm add tailwindcss@latest
   
   pnpm add tailwindcss@latest
2. Verify your package.json
After installing, your package.json should include something like: 
   "devDependencies": {
     "tailwindcss": "^4.0.0"
   }
   
   "devDependencies": {
     "tailwindcss": "^4.0.0"
   }
3. Remove old Tailwind config (if present)
Tailwind CSS v4 with Nuxt UI Pro v3 uses a CSS-first configuration. You should remove any tailwind.config.js or tailwind.config.ts files and instead use the @theme directive in your CSS, as shown in the docs Theme Customization. 4. Import Tailwind in your CSS
Your assets/css/main.css should look like: 
   @import "tailwindcss";
   @import "@nuxt/ui-pro";
   
   @import "tailwindcss";
   @import "@nuxt/ui-pro";
Summary:
The knowledge sources confirm that Tailwind CSS v4 is required, but do not provide a direct installation command. You must manually install or upgrade Tailwind CSS to v4 in your project to avoid the errors you are seeing and ensure compatibility with Nuxt UI Pro v3 and Nuxt 4 mode Theme Customization Migration Guide. If you still see errors after this, double-check that no old Tailwind config files remain and that your main.css is correctly set up. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@291389486720352266> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
thejacer87
thejacer87OP•3mo ago
@kapa.ai seems strange to have to manually install tailwind, there is no mention of it in the nuxt ui install docs. also, now i get this error: 
ERROR  Cannot start nuxt:  It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.
ERROR  Cannot start nuxt:  It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.
kapa.ai
kapa.ai•3mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct that the Nuxt UI and Nuxt UI Pro installation guides do not explicitly mention the need to manually install Tailwind CSS as a dependency. However, they do state that Nuxt UI is designed to work with Tailwind CSS v4 and show examples where @import "tailwindcss"; is used in your CSS files. They also mention that if you're using pnpm, you should ensure tailwindcss is installed in your project's root directory, but the guides do not provide a direct installation command or clarify whether Tailwind is auto-installed by the module Nuxt UI Pro Installation Guide. Regarding the error: 
It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.
It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.
The knowledge sources do not mention this error or the need to install @tailwindcss/postcss. They also do not provide any guidance on updating the PostCSS configuration for Tailwind CSS v4 in the context of Nuxt UI or Nuxt UI Pro. The official docs focus on the CSS-first configuration and using the @theme directive, and do not reference any manual PostCSS plugin setup or this new package. If you are seeing this error, it is likely due to a recent change in Tailwind CSS v4's integration with PostCSS, but the Nuxt UI documentation has not yet been updated to address this scenario. At this time, there is no explicit information in the provided knowledge sources about how to resolve this error within a Nuxt UI or Nuxt UI Pro project. If you need further help, you may want to check the official Tailwind CSS documentation or open an issue with the Nuxt UI team, as this appears to be a gap in the current documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@291389486720352266> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?