Heroku build failure with react and tailwind

Question

I tried deploying this to Heroku and this the error I am receiving while trying to push it up into Heroku. Theres are the errors I am currently getting. I see that the error I am currently getting involves tailwind, but I'm not exactly sure what to do with it.

       Running heroku-postbuild
       
       > [email protected] heroku-postbuild /tmp/build_1c2bd436
       > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
       
       
       > [email protected] postinstall /tmp/build_1c2bd436/client/node_modules/babel-runtime/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > [email protected] postinstall /tmp/build_1c2bd436/client/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > [email protected] postinstall /tmp/build_1c2bd436/client/node_modules/core-js-pure
       > node -e "try{require('./postinstall')}catch(e){}"
       
       added 1657 packages from 798 contributors and audited 1740 packages in 45.079s
       
       68 packages are looking for funding
         run `npm fund` for details
       
       found 0 vulnerabilities
       
       
       > [email protected] build /tmp/build_1c2bd436/client
       > npm run build:css && react-scripts build
       
       
       > [email protected] build:css /tmp/build_1c2bd436/client
       > postcss src/Assests/tailwind.css -o src/Assests/main.css
       
sh: 1: postcss: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] build:css: `postcss src/Assests/tailwind.css -o src/Assests/main.css`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] build:css script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.tYOmN/_logs/2020-09-25T00_53_01_969Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run build:css && react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.tYOmN/_logs/2020-09-25T00_53_01_990Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.tYOmN/_logs/2020-09-25T00_53_02_014Z-debug.log
-----> Build failed ```

Here is my package.json on the Client Side

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.20.0",
    "http-proxy-middleware": "^1.0.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-stripe-checkout": "^2.6.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/Assests/tailwind.css -o src/Assests/main.css",
    "watch:css": "postcss src/Assests/tailwind.css -o src/Assests/main.css"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "i": "^0.3.6",
    "postcss-cli": "^7.1.2",
    "tailwindcss": "^1.8.9"
  }
}

And here is my package.json on my server side.

{
  "name": "ecommerce",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": "14.4.0",
    "npm": "6.14.8"
  },
  "scripts": {
    "server": "nodemon server.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "concurrently": "^5.3.0",
    "cookie-session": "^1.4.0",
    "express": "^4.17.1",
    "mongoose": "^5.10.7",
    "nodemon": "^2.0.4",
    "passport": "^0.4.1",
    "passport-google-oauth20": "^2.0.0",
    "stripe": "^8.100.0"
  }
}

Any suggestions?? Thanks!

Answer 1

add those to dependencies not devDependencies

"autoprefixer": "^9.8.6",
"postcss-cli": "^7.1.2",
"tailwindcss": "^1.8.9"

Answer 2

As the precious answer: moving these

"autoprefixer": "^9.8.6",
"postcss-cli": "^7.1.2",
"tailwindcss": "^1.8.9"

from devDependencies to dependencies works for me