Nuxt•2mo ago

Migration Issue with Nuxt UI 3 and Tailwind Resolution

Hi everyone! I resolved an issue during my migration to Nuxt UI 3 but wanted to get clarity on the underlying cause. Error Encountered: When running pnpm dev, I got:

Pre-transform error: Can't resolve 'tailwindcss' in '/home/frontend/app/assets/css'
Solution:

Adding " "tailwindcss": "^4.0.15"," to package.json fixed it. Question: Shouldn’t TailwindCSS be included by default in "@nuxt/ui-pro": "^3.0.1"? Or is this expected behavior ? Thanks for any insights!

6 Replies

kapa.ai•2mo ago

Hi @Chazzer. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're encountering a common issue during migration to Nuxt UI 3, which uses Tailwind CSS v4. Let me explain what's happening. The Issue The error you encountered (Can't resolve 'tailwindcss' in '/home/frontend/app/assets/css') occurs because Nuxt UI 3 requires Tailwind CSS v4, but it doesn't automatically install the Tailwind CSS package itself. This is expected behavior. Why This Happens Nuxt UI Pro depends on Tailwind CSS, but it's designed as a peer dependency rather than a direct dependency. This approach gives you flexibility in managing your Tailwind version, but requires explicit installation. According to the installation guides for both Nuxt UI and Nuxt UI Pro, if you're using pnpm, you need to either: 1. Set shamefully-hoist=true in your .npmrc file, OR 2. Install tailwindcss in your project's root directory As mentioned in the documentation:

If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss in your project's root directory.

Your Solution Your solution of adding "@tailwindcss/vite": "^4.0.15" to your package.json is correct. This package provides the Tailwind CSS v4 integration for Vite, which is what Nuxt UI 3 expects. Migration Context This is part of the broader migration to Tailwind CSS v4, which Nuxt UI 3 has adopted. As mentioned in the migration guide:

Nuxt UI v3.0 is a new major version rebuilt from the ground up, introducing a modern architecture with significant performance improvements and an enhanced developer experience. This major release includes several breaking changes alongside powerful new features and capabilities: - Tailwind CSS v4: Migration from JavaScript to CSS-based configuration

The new approach uses CSS-first configuration through the @theme directive rather than the JavaScript configuration used in previous versions. For a complete migration, make sure you're also following the other steps in the migration guide, particularly importing Tailwind CSS and Nuxt UI Pro in your CSS file with the proper syntax:

@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

The theme(static) is required since Tailwind CSS v4.0.8 introduced a breaking change to only expose used CSS variables, as noted in the installation documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@391292595931709451> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

HugoRCD•2mo ago

Tailwind is installed by default, so you don't have to install it, it's all done automatically 🤔 You can send your package.json and nuxt.config.ts ?😁

ChazzerOP•2mo ago

Yes that's what i thought here is my package.json


{
  "name": "nuxt-ui-pro-template-landing",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
    "@calcom/atoms": "^1.0.94",
    "@iconify-json/heroicons": "^1.2.2",
    "@iconify-json/material-symbols": "^1.2.17",
    "@iconify-json/simple-icons": "^1.2.29",
    "@nuxt/content": "^3.4.0",
    "@nuxt/fonts": "^0.11.0",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui-pro": "^3.0.1",
    "@nuxtjs/i18n": "9.3.3",
    "@react-spring/three": "^9.7.5",
    "@react-three/fiber": "^9.1.0",
    "@shadergradient/react": "^2.0.24",
    "@vitejs/plugin-react": "^4.3.4",
    "@vueuse/motion": "^3.0.3",
    "axios": "^1.8.4",
    "hammerjs": "^2.0.8",
    "nuxt": "^3.16.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss": "^4.0.15",
    "three": "^0.174.0",
    "veaury": "^2.6.2"
  },
  "devDependencies": {
    "@nuxt/eslint": "^1.2.0",
    "@types/hammerjs": "^2.0.46",
    "eslint": "^9.22.0",
    "typescript": "^5.8.2",
    "vue-tsc": "^2.2.0"
  },
  "resolutions": {
    "unimport": "4.1.1",
    "vue-tsc": "2.2.0"
  },
  "pnpm": {
    "onlyBuiltDependencies": [
      "better-sqlite3"
    ]
  },
  "packageManager": "[email protected]"
}

and nuxt.config.ts


import veauryVitePlugins from 'veaury/vite/index.js'

export default defineNuxtConfig({  
  modules: [
    '@nuxt/eslint',
    '@nuxt/image',
    '@nuxt/ui-pro',
    '@nuxt/content',
    '@nuxt/fonts',
    '@nuxtjs/i18n'
    ],

  devtools: {
    enabled: true
  },

  css: ['~/assets/css/main.css'],

  mdc: {
    highlight: {
      noApiRoute: false
    }
  },

  colorMode: {
    preference: 'light'
  },
  
  runtimeConfig: {
    sitePassword: process.env.SITE_PASSWORD,
    public: {
      siteAuthEnabled: process.env.SITE_AUTH_ENABLED === 'true'
    }
  },

  devServer: {
    port: 3001
  },

  future: {
    compatibilityVersion: 4
  },

  compatibilityDate: '2025-01-15',

  vite: {
    plugins: [
      veauryVitePlugins({
        type: 'vue',
        isNuxt: true
      })
    ]
  },

  eslint: {
    config: {
      stylistic: {
        commaDangle: 'never',
        braceStyle: '1tbs'
      }
    }
  },

  nitro: {
    prerender: {
      routes: [
        '/'
      ],
    }
  },

  i18n: {
    locales: [
      { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' },
      { code: 'fr', name: 'Français', language: 'fr-FR', dir: 'ltr' },
      { code: 'ar', name: 'العربية', language: 'ar-AR', dir: 'rtl' }
    ],
    strategy: 'prefix_except_default',
    defaultLocale: 'en',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'all'
    }
  }
})

Find the issue problem came from "@calcom/atoms": "^1.0.94", which internally uses Tailwind CSS v3. what i think is that the internal Tailwind Vite integration within @nuxt/ui-pro seems unable to reliably resolve the core tailwindcss v4 package path in complex build environments (potentially due to plugin interactions or the presence of dependencies using different Tailwind versions like v3), unless tailwindcss is declared as a direct project dependency.

HugoRCD•2mo ago

Do you have a .npmrc in your project?

ChazzerOP•2mo ago

i do shamefully-hoist=true

Gaming

Programming

Migration Issue with Nuxt UI 3 and Tailwind Resolution

Did you find this page helpful?