Heroku部署带Tailwind的MERN应用时Craco构建缺失tailwindcss模块求助

• 你同时使用了mars/create-react-app专用buildpack和自定义的heroku-postbuild构建逻辑，二者执行的依赖安装流程冲突，导致前端的tailwind相关依赖未正确安装
• 你将tailwind相关依赖放在了devDependencies中，Heroku生产环境默认会跳过devDependencies安装，即使你加了NPM_CONFIG_PRODUCTION=false，冲突的buildpack逻辑还是会触发生产依赖裁剪
• 你使用的tailwind postcss7兼容版是别名安装模式，旧版本npm对别名依赖的生产安装处理存在兼容问题

1. 替换Heroku buildpack为官方Node.js buildpack，删除冗余的react专用buildpack：

heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs

2. 调整前端frontend/package.json的依赖配置，将tailwind、postcss、autoprefixer从devDependencies移动到dependencies中，修改后配置示例如下：

"dependencies": {
  "@craco/craco": "^6.2.0",
  "@testing-library/jest-dom": "^5.14.1",
  "@testing-library/react": "^11.2.7",
  "@testing-library/user-event": "^12.8.3",
  "axios": "^0.21.1",
  "react": "^17.0.2",
  "react-bootstrap": "^1.6.1",
  "react-dom": "^17.0.2",
  "react-paypal-button-v2": "^2.6.3",
  "react-redux": "^7.2.5",
  "react-router-dom": "^5.2.1",
  "react-scripts": "4.0.3",
  "redux": "^4.1.1",
  "redux-devtools-extension": "^2.13.9",
  "redux-thunk": "^2.3.0",
  "web-vitals": "^1.1.2",
  "autoprefixer": "^9.8.7",
  "postcss": "^7.0.38",
  "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16"
},
"devDependencies": {}

3. 清理Heroku构建缓存，避免历史缓存干扰：

heroku builds:cache:purge -a <替换为你的Heroku应用名称>

4. 提交所有代码变更，重新执行git push heroku main部署即可。

如果部署后仍有异常，可进入Heroku实例执行以下命令排查：

heroku run bash
cd frontend
npm list tailwindcss
# 若未正确打印版本，手动执行安装构建
npm install --production=false
npm run build

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