Nuxt shadcn/vue installation results in missing module error

I’m trying to set up a fresh Nuxt 4 project with Tailwind CSS v4 and shadcn-vue, following the official installation guide:
👉 shadcn-vue Nuxt installation docs

Steps I followed (from the docs)

1. Created a new Nuxt project with npm create nuxt@latest

2. Installed Tailwind v4 with npm install tailwindcss @tailwindcss/vite

3. Replaced assets/css/tailwind.css with:

   @import "tailwindcss";
   

4. Updated nuxt.config.ts:

   import tailwindcss from '@tailwindcss/vite'
   
   export default defineNuxtConfig({
     css: ['~/assets/css/tailwind.css'],
     vite: {
       plugins: [tailwindcss()],
     },
   })
   

5. Added the shadcn-nuxt module with:

   npx nuxi@latest module add shadcn-nuxt
   

6. Added the ssr-width plugin as described in the docs:

   // app/plugins/ssr-width.ts
   import { provideSSRWidth } from '@vueuse/core'
   
   export default defineNuxtPlugin((nuxtApp) => {
     provideSSRWidth(1024, nuxtApp.vueApp)
   })
   

   👉 At this point I hit my first problem:
   I had to manually install @vueuse/core (npm install @vueuse/core), which wasn’t mentioned in the docs.

7. Ran npx shadcn-vue@latest init → got my second problem:

   No import alias found in your tsconfig.json file.
   

   I fixed this by adding to tsconfig.json:

   {
     // ...,
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["./*"],
         "~/*": ["./*"]
       }
     }
   }
   

8. Added a Button component with npx shadcn-vue@latest add button

The error I’m stuck on

When I run the dev server, I get this error in the browser:

500
Cannot find module '~/assets/css/tailwind.css' imported from 'virtual:nuxt:.../.nuxt/css.mjs'.
- If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution.
- Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead.

What I’ve tried

• Switching from ~/assets/css/tailwind.css to @/assets/css/tailwind.css in nuxt.config.ts
• Adding both @/* and ~/* to tsconfig.json
• Installing vite-tsconfig-paths
• Clearing .nuxt and node_modules and reinstalling

But I still get the same error.

Versions

{
  "dependencies": {
    "nuxt": "^4.0.3",
    "tailwindcss": "^4.1.12",
    "@tailwindcss/vite": "^4.1.12",
    "shadcn-nuxt": "^2.2.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-vue-next": "^0.542.0",
    "tailwind-merge": "^3.3.1",
    "reka-ui": "^2.5.0",
    "vue": "^3.5.20",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@vueuse/core": "^13.8.0"
  }
}

Reproducible repo

I’ve pushed the full code here:
👉 GitHub repo: nuxt-tailwind-shadcn

Question

What is the correct way to configure Nuxt 4 + Tailwind v4 + shadcn-vue so that:

• Tailwind CSS is loaded without alias resolution errors
• ~/assets/css/tailwind.css (or @/assets/css/tailwind.css) resolves correctly
• shadcn-vue works as expected with Nuxt 4

I had the same issue, what worked for me was moving assets/css/tailwind.css inside the app folder. So instead of having ./assets/css/tailwind.css you should have ./app/assets/css/tailwind.css