[Bug]: Nuxt 4 Tailwind Cannot find module '@/assets/css/tailwind.css' imported from

[JoaozinhoKz4]

Reproduction

npx nuxi@latest module add shadcn-nuxt

Describe the bug

Followed the nuxt shadcn/vue installation guide and keep getting the error below:

• If you rely on tsconfig.json's "paths" to resolve modules, please
  install "vite-tsconfig-paths" plugin to handle module resolution.\n +

"- Make sure you don't have relative aliases in your Vitest config.
Use absolute paths instead. Read more:
https://vitest.dev/guide/common-errors",
code: 'ERR_MODULE_NOT_FOUND',
[Symbol(vitest.error.not_found.data)]: {
id: '@/assets/css/tailwind.css',
importer: 'virtual:nuxt:C%3A%2FUsers%2Fjoao%2FDocuments%2FHealth4%2FfrontendV2%2F.nuxt%2Fcss.mjs',
},
}

Installed vite-tsconfig-paths as vite plugin:
vite: {
plugins: [
tailwindcss(),
tsconfigPaths()
],
},

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 38.59 GB / 63.92 GB
  Binaries:
    Node: 22.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.3 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    nuxt: ^4.0.3 => 4.0.3 
    reka-ui: ^2.4.1 => 2.4.1 
    shadcn-nuxt: ^2.2.0 => 2.2.0 
    vue: ^3.5.18 => 3.5.18

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[t1m4lc]

Same issue for me :/

[Xamez]

i had the same issue, and to solve it i have to do this:

export default defineNuxtConfig({
  // ...
  css: ['~~/assets/css/tailwind.css'],  // <--- here add an extra '~' (which is equivalent to ../)
  vite: {
    plugins: [
      tailwindcss(),
    ]
  },
})

[mathieumagalhaes]

Hey @JoaozinhoKz4, try placing the tsconfigPaths plugin at the beginning of the vite.plugins array.
I have a feeling the order might matter.

vite: {
   plugins: [
      tsconfigPaths(),
      tailwindcss(),
   ],
}

Secondly, in Nuxt 4, the @/assets alias now defaults to <root>/app/assets.
Ensure that the file <root>/app/assets/css/tailwind.css exists.

[donPuerto]

I have the same issue also, any work around

[TheAdvo]

I was able to Fix this for any one in the future,

nuxt.config.ts

import tsconfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  devtools: { enabled: true },

  modules: [
    "shadcn-nuxt",
  ],

  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: "",
    /**
     * Directory that the component lives in.
     * @default "@/components/ui"
     */
    componentDir: "@/components/ui",
  },

  // use Nuxt alias to resolve app/ directory
  css: ["~/assets/css/tailwind.css"],
  vite: {
    plugins: [tailwindcss(), tsconfigPaths()],
  },
});

your components.json(create if not created)

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
  "typescript": true,
  "tailwind": {
    "config": "",
    "css": "./app/assets/css/tailwind.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "composables": "@/composables",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib"
  },
  "iconLibrary": "lucide"
}

tsconfig.json

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "files": [],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "~/*": ["./*"],
      "~~/*": ["./*"],
      "@/components/*": ["./app/components/*"],
      "@/lib/*": ["./app/lib/*"],
      "@/composables/*": ["./app/composables/*"]
    }
  },
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ]
}

The main issue is tailwind not actually finding the correct file, hence the

import tsconfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";

You can check to see if its loading on the browser through dev tools.
The main issue I had was that it was actually loading the tailwind file fine what it wasn't doing was the module it self.