Vue2项目Tailwind开发正常，生产构建提示需PostCSS 8错误如何解决

问题根因 #

你本地项目虽然安装了适配PostCSS7的Tailwind兼容版本，但构建脚本中使用npx tailwindcss调用命令时，npx默认会优先拉取远程最新的Tailwind版本（依赖PostCSS8），无视本地安装的兼容包，导致版本不匹配报错。

修复步骤 #

• 第一步：清理重复冗余依赖，重新安装适配PostCSS7的版本
  先执行卸载命令：
  npm uninstall tailwindcss @tailwindcss/postcss7-compat
  再执行安装命令：
  npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat@^2.2.17 postcss@^7 autoprefixer@^9
• 第二步：修改package.json中的构建脚本，避免npx拉取远程包
  将scripts字段里的build和build:local命令中的npx tailwindcss替换为npx --no-install tailwindcss，修改后配置如下：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build:local": "SET NODE_ENV=production && npx --no-install tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
    "build": "cross-env NODE_ENV=production && npx --no-install tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
  

• 第三步：检查项目根目录下的postcss.config.js配置，确保配置正确：

  module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer')
    ]
  }
  

• 第四步：清空缓存后重新构建
  执行以下命令清理旧依赖：
  rm -rf node_modules package-lock.json
  重新安装依赖：
  npm install
  再执行生产构建命令即可正常打包。

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