初始化Turborepo并在Next.js中安装Tailwind CSS时遇Turbo错误

问题重现 #

1. 执行npx create-turbo@latest初始化Turborepo，选择npm作为包管理器；
2. 进入apps目录，删除一个Next.js文件夹，将剩余文件夹重命名为user-app；
3. 安装Tailwind CSS依赖：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

依赖安装成功后，npm审计提示Next.js 14.2.6存在高危漏洞，需升级至14.2.16（超出当前依赖范围）；
4. 运行npm run dev后出现服务器错误，核心报错链指向CSS处理环节，关键信息：

Error: failed to receive message
Caused by:
- reading packet data
- Connection reset by peer (os error 104)

可能原因 #

• Next.js版本与Turborepo、Tailwind CSS存在兼容性冲突：14.2.6版本的已知漏洞伴随编译逻辑bug，导致Turbo进程间通信中断；
• Turbo缓存残留旧编译产物：重命名应用文件夹后，缓存路径映射未更新，引发资源解析错误；
• Tailwind/PostCSS配置路径错误：重命名应用后，content路径未同步调整，导致CSS编译失败。

解决方案 #

1. 强制升级Next.js至兼容版本 #

手动升级到14.2.16修复漏洞和兼容性问题：

npm install next@14.2.16 --force

或直接修改package.json中next的版本号为14.2.16，再执行npm install。

2. 清理Turbo及项目缓存 #

# 清理Turbo缓存
npx turbo clean

# 删除本地依赖和锁文件
rm -rf node_modules package-lock.json

# 重新安装依赖
npm install

3. 修正Tailwind配置路径 #

确保tailwind.config.js中的content字段匹配重命名后的应用结构：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 验证PostCSS配置 #

确保postcss.config.js仅包含必要插件，避免冲突：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

5. 重新启动开发服务 #

npm run dev

内容的提问来源于stack exchange，提问作者Harsh Singh