生产环境Tailwind CSS样式显示异常 本地运行正常 技术栈为Vue+Tailwind+Laravel+Inertia

问题根因 #

核心问题出在你的Tailwind CSS生产构建剪裁规则配置错误，同时存在Node版本环境差异的潜在风险：

1. Tailwind扫描路径被注释
   你当前tailwind.config.js中purge配置项里的.vue文件扫描路径是被注释状态：

// './resources/**/*.vue',

Tailwind在本地开发环境默认不会启用样式剪裁，会全量加载所有样式，所以本地显示正常。但生产构建时会自动触发purge逻辑，只保留扫描到的文件中用到的样式，你注释了.vue文件路径，Tailwind无法识别到.vue模板里写的所有类名，就会把这些样式全部剪裁移除，导致生产环境样式缺失。

2. 生产与本地Node版本不一致
   本地Node版本为v16.7.0，生产环境为v12.22.5，跨大版本的Node环境很容易导致依赖安装、构建逻辑的不一致，是潜在的风险点。

修复步骤 #

1. 打开tailwind.config.js，移除purge数组里.vue路径前的注释符，修改后配置如下：

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue', // 去掉注释生效
  ],
  // 其余配置保持不变
}

2. 建议将生产环境Node版本升级到和本地一致的v16.7.0，避免环境差异导致的其他构建问题。
3. 重新执行生产构建命令部署即可。

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