在Next.js/React项目引入Tailwind时遇嵌套CSS错误求助

我是Next.js/React新手，跟着Tailwind CSS for Next.js教程做了以下操作：

1. 安装依赖：

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

2. 修改tailwind.config.js：

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

3. 修改globals.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

...其余原有CSS样式（数量较多）

启动开发服务器（npm run dev）时碰到了嵌套CSS的错误，于是查Tailwind官方文档更新了postcss.config.js：

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

但现在还是收到重复嵌套CSS配置的错误警告，还有webpack缓存提示，这咋回事？该怎么解决？

问题原因 #

• Next.js 默认的PostCSS配置已经自带嵌套CSS处理能力（比如集成了postcss-nested或postcss-preset-env），手动添加的tailwindcss/nesting和默认配置冲突，触发重复配置警告
• Webpack缓存保留了旧配置信息，导致新修改的配置无法完全生效

具体解决步骤 #

1. 移除重复的嵌套CSS配置
   打开postcss.config.js，删除'tailwindcss/nesting': {},这一行，修改后配置如下：

   module.exports = {
     plugins: {
       'postcss-import': {},
       tailwindcss: {},
       autoprefixer: {},
     }
   }
   

   若确实需要Tailwind的嵌套语法支持，可检查next.config.js中是否开启了PostCSS相关嵌套配置，调整为不冲突的状态即可。

2. 清理Webpack缓存

   • 停止当前运行的开发服务器
   • 删除项目根目录下的.next文件夹
   • 重新执行npm run dev启动服务

3. 排查原有CSS代码

   • 检查globals.css中保留的原有样式，确认是否存在非标准嵌套语法，或是这些嵌套代码触发了重复处理警告
   • 可先注释掉原有CSS，启动服务器验证警告是否消失，若消失再逐步恢复代码，定位具体问题代码段

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