大家好，我最近在尝试搭建全新的 Nuxt 4 项目，搭配 Tailwind CSS v4 和 shadcn-vue，跟着官方安装文档一步步操作，但遇到了几个问题，目前卡在一个模块找不到的错误上，想请教大家怎么解决。

我按照文档执行的步骤 #

我是跟着 shadcn-vue 的 Nuxt 安装文档操作的，具体步骤如下：

1. 创建新的 Nuxt 项目：

   npm create nuxt@latest
   

2. 安装 Tailwind CSS v4：

   npm install tailwindcss @tailwindcss/vite
   

3. 替换 assets/css/tailwind.css 的内容为：

   @import "tailwindcss";
   

4. 更新 nuxt.config.ts 配置：

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

5. 添加 shadcn-nuxt 模块：

   npx nuxi@latest module add shadcn-nuxt
   

6. 按照文档要求添加 ssr-width 插件（路径：app/plugins/ssr-width.ts）：

   import { provideSSRWidth } from '@vueuse/core'
   export default defineNuxtPlugin((nuxtApp) => {
     provideSSRWidth(1024, nuxtApp.vueApp)
   })
   

遇到的第一个未文档提及的问题 #

执行到这里时，我遇到了第一个小坑：文档里完全没说需要手动安装 @vueuse/core，运行时直接报错找不到这个依赖包，我只能自己手动执行：

npm install @vueuse/core

才解决了这个依赖问题。

遇到的第二个路径别名问题 #

接着执行 shadcn-vue 的初始化命令：

npx shadcn-vue@latest init

终端直接报错：No import alias found in your tsconfig.json file.
我自己手动修改了 tsconfig.json，添加了路径别名配置才解决：

{
  // 其他原有配置...
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "~/*": ["./*"]
    }
  }
}

组件添加成功，但启动服务器报错 #

之后我成功添加了 Button 组件：

npx shadcn-vue@latest add button

但当我运行 npm run dev 启动开发服务器后，浏览器直接弹出 500 错误，这也是我目前卡住的问题：

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.

我已经尝试过的无效解决方法 #

为了修复这个错误，我试了以下几种方案，但都没有效果：

• 将 nuxt.config.ts 里的 ~/assets/css/tailwind.css 替换为 @/assets/css/tailwind.css
• 在 tsconfig.json 中同时配置了 @/* 和 ~/* 两种路径别名
• 安装了提示里提到的 vite-tsconfig-paths 插件
• 清空了 .nuxt 缓存文件夹和 node_modules，重新执行 npm install 后再启动服务

我的项目依赖版本 #

最后附上我的项目依赖版本，方便大家排查：

{
  "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"
  }
}

想请教各位，Nuxt 4 + Tailwind CSS v4 + shadcn-vue 的正确配置应该是怎样的？如何才能解决这个找不到 tailwind.css 的错误，让路径别名正常工作，同时让 shadcn-vue 也能正常运行？

内容来源于stack exchange