生产环境TailwindCSS构建purge未生效 自定义@apply样式异常

问题原因 #

1. 生产构建输入文件错误 #

你的build-css命令使用根目录下携带@tailwind、@layer等Tailwind专属指令的源文件style.css作为输入，输出到css/style.css。但你修改后的生产构建命令输入路径为css/style.css，这是已经编译完成的全量CSS文件，Tailwind的Purge逻辑无法对这类已编译文件做类裁剪，所以体积不会有任何变化。

2. Purge扫描路径配置不完整 #

你当前tailwind.config.js中的purge配置仅匹配根目录下的*.jsx、*.js、*.php文件，如果你的项目页面、模板、逻辑文件存放在子目录（如src、views等），这些文件里用到的Tailwind类不会被扫描到，即使Purge生效也会出现样式丢失或者裁剪不完整的问题。

修复方案 #

1. 修正生产构建命令，将输入路径改回根目录的原始style.css源文件：

"production": "cross-env NODE_ENV=production tailwindcss -i style.css -o css/style.min.css"

2. 完善tailwind.config.js的Purge扫描路径，覆盖所有用到Tailwind类的文件：

module.exports = {
  // 其余配置保持不变
  purge: [
    "./**/*.php",
    "./**/*.js",
    "./**/*.jsx",
    // 如果有html、vue等后缀的文件用到Tailwind类，也可以对应添加匹配规则
  ],
  // 其余配置保持不变
}

3. （调试用）如果修改后还是没有触发Purge，可以临时强制开启Purge验证逻辑是否生效：

module.exports = {
  // 其余配置保持不变
  purge: {
    enabled: true, // 强制开启Purge，不受NODE_ENV值影响，调试正常后可删除该行
    content: [
      "./**/*.php",
      "./**/*.js",
      "./**/*.jsx",
    ]
  },
  // 其余配置保持不变
}

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