NextJS生产构建中Tailwind样式失效，开发环境正常

1. 检查Tailwind配置的文件路径 #

确保tailwind.config.js里的content数组覆盖了所有用到Tailwind类的文件，生产环境下Tailwind只会保留扫描到的样式，漏写路径会导致样式被裁剪。示例配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,html}",
    "./public/index.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 确认PostCSS配置适配生产环境 #

检查postcss.config.js是否正确加载Tailwind和autoprefixer，若使用压缩工具（如cssnano），要限定只在生产环境启用：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

3. 验证全局CSS的导入与指令 #

确保全局样式文件（比如global.css）包含Tailwind核心指令，且被项目入口文件正确导入：

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

比如在React项目的main.tsx或index.js里添加import './global.css'，避免生产构建时被tree-shaking移除。

4. 检查构建脚本的环境变量 #

确保package.json的build脚本正确设置生产环境变量，Tailwind会根据NODE_ENV判断是否启用样式裁剪：

{
  "scripts": {
    "dev": "vite",
    "build": "NODE_ENV=production vite build",
    "start": "vite preview"
  }
}

Windows环境需改为set NODE_ENV=production && vite build。

5. 清理缓存后重新构建 #

残留缓存可能导致样式异常，执行以下步骤：

• 删除构建输出目录（如dist或build）
• 删除node_modules/.cache（若存在）
• 重新执行npm run build && npm run start

6. 排查工具对PostCSS的干扰 #

部分框架或插件可能在生产构建时修改PostCSS配置，查看构建日志，确认PostCSS处理阶段是否正常加载了tailwindcss插件。

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