NextJS 14+Tailwind生产构建失败：CssSyntaxError未知单词错误求助

开发模式正常但生产构建失败，核心原因是生产环境会对CSS进行严格的语法校验和压缩，而开发模式下不会执行这些操作。错误指向的是构建过程中生成的静态CSS文件，说明原始代码中存在语法问题或兼容性问题，只有在压缩阶段才会暴露出来。

1. 定位原始错误代码 #

生成的CSS文件是压缩后的，直接查看无法定位问题。可以临时禁用CSS压缩来获取未压缩的代码：
在next.config.js中添加以下配置：

module.exports = {
  webpack: (config) => {
    config.optimization.minimizer.forEach(minimizer => {
      if (minimizer.constructor.name === 'CssMinimizerPlugin') {
        minimizer.options.enabled = false;
      }
    });
    return config;
  },
};

重新执行npm run build，此时生成的CSS文件未被压缩，你可以直接查看第1022行的内容，找到对应的原始CSS代码位置（可能是自定义样式、Tailwind指令或第三方组件的样式）。

2. 检查自定义CSS语法 #

• 排查项目中所有.css、.scss文件以及.tsx/.jsx内联样式，确认是否存在未闭合的括号、错误的属性值、不被PostCSS支持的语法。
• 验证Tailwind CSS指令（如@apply、@layer）的使用是否正确，确保它们放置在@tailwind指令之后。

3. 排查第三方依赖的CSS #

你使用了Swiper组件，它自带的CSS可能在压缩时出现兼容性问题：

• 尝试更新Swiper到最新版本：

  npm update swiper
  

• 或者手动导入Swiper的未压缩CSS文件替代默认导入：

  // 替换原来的导入
  import 'swiper/css/bundle';
  // 改为导入未压缩版本
  import 'swiper/swiper-bundle.css';
  

4. 清理构建缓存和依赖 #

• 删除.next目录和node_modules：

  rm -rf .next node_modules
  

• 重新安装依赖：

  npm install
  

• 清理npm缓存：

  npm cache clean --force
  

• 再次尝试构建：

  npm run build
  

5. 检查PostCSS和Tailwind配置 #

• 确认postcss.config.js配置正确，需包含Tailwind和autoprefixer：

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

• 检查tailwind.config.js中的content配置是否覆盖了所有需要Tailwind处理的文件路径，避免遗漏导致样式生成异常。

6. 调整依赖版本兼容性 #

如果以上方法无效，可能是依赖版本不匹配：

• 尝试将Next.js版本与eslint-config-next保持一致：

  npm install next@14.2.0
  

• 或者降级Tailwind CSS到稳定版本：

  npm install tailwindcss@3.4.8
  

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