使用Tailwind CSS执行生产构建时无法精简CSS文件该如何解决

核心问题原因 #

你遇到的问题主要由以下几个配置错误导致：

• 生产环境变量设置不兼容跨平台，Tailwind默认仅在NODE_ENV=production时自动开启Purge精简功能，原有脚本写法在Windows环境下无法正确识别环境变量
• Tailwind的Purge配置未显式指定开启规则，部分场景下会出现环境变量识别失效的问题
• 未覆盖所有用到Tailwind类名的文件路径，可能导致Purge误判需要删除的样式

具体修复步骤 #

1. 修正tailwind.config.js配置 #

修改你的purge配置段，显式指定生产环境开启Purge，同时补全文件匹配路径：

module.exports = {
  purge: {
    // 显式指定生产环境开启精简，避免环境变量识别异常
    enabled: process.env.NODE_ENV === 'production',
    // 匹配所有用到Tailwind类名的文件，JS文件如果有用到动态类名也可以加进来
    content: [
      './src/main/resources/templates/**/*.html',
      './src/main/resources/static/**/*.js'
    ],
    // 如果有动态拼接生成的Tailwind类名，需要加到safelist里避免被误删
    // safelist: ['text-red-500', 'bg-blue-600']
  },
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

2. 修复跨平台环境变量设置 #

首先安装cross-env兼容不同系统的环境变量写法：

npm install cross-env --save-dev

然后修改package.json中的build-prod脚本：

{
  "scripts": {
    "watch": "gulp watch",
    "build": "gulp build",
    "build-prod": "cross-env NODE_ENV=production gulp build --env production"
  }
}

3. 检查CSS入口文件 #

确保你的src/main/resources/static/css/application.css文件开头包含Tailwind的核心指令，没有这三行不会生成Tailwind样式也无法精简：

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

4. 重新执行生产构建 #

运行npm run build-prod即可看到生成的CSS文件已经被精简，通常体积会降到几十KB级别。

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