1

My project keeps getting the error PostCSS plugin tailwindcss requires PostCSS 8 when npm start.

This case is the same, but now it's old and nothing works. PostCSS 8 now should be compatible with Tailwind and CRA, so I installed the latest versions but returns the same error. I got stuck here for almost 3days, so I'd appreciate any suggestions or comments!

What I tried (but never worked):

  • Downgraded to compatible versions of tailwindcss/postcss7-compat": "^2.2.17”, PostCSS ^7.0.39 and autoprefixer": "^9.8.8
  • Upgraded to the latest version of tailwindcss:"^2.2.17", autoprefixer:"^10.4.0", and PostCSS ^8.3.11
  • Upgraded node v16.13.0,craco: "^6.4.0", and react-scripts:"^4.0.3".
  • Added --openssl-legacy-provider in start script
  • Deleted package-lock.json, yarn-lock.json, node-modules, and npm install
  • Restarted VScode and browser multiple times.
{
  "dependencies": {
    "@craco/craco": "^6.4.0",
    "@heroicons/react": "^1.0.4",
    "@types/react-router-dom": "^5.1.8",
    "autoprefixer": "^10.4.0",
    "axios": "^0.24.0",
    "classnames": "^2.3.1",
    "cra-template-typescript": "1.1.2",
    "postcss": "^8.3.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-textarea-autosize": "^8.3.3",
    "react-transition-group": "^4.4.2",
    "router": "^1.3.5",
    "tailwindcss": "^2.2.17",
    "typescript": "^4.3.5",
    "yarn": "^1.22.17"
  },
  "scripts": {
    "build:tailwind": "tailwindcss build -i src/index.css -o src/index.css",
    "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
Chi
  • 276
  • 1
  • 8
  • 20

2 Answers2

4

I spent so much time on this and finally found a workaround. Use tailwind CLI instead of postCSS and autoprefixer. Follow this doc. Don't forget to remove require('autoprefixer') from the craco.config.js. PostCSS official says that PostCSS8 is now compatible with create-react-app, but unfortunately not. I saw many people are still having the same problem as me, so I hope this answer helps someone.

Chi
  • 276
  • 1
  • 8
  • 20
0

I was having a similar issue trying to upgrade my Create-React-App to use Tailwinds 3 from Tailwinds 2. These are the steps I ended up doing:

  1. Updated react-scripts. The app was currently on version 4, so I followed the steps to upgrade from 4 to 5: https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md
  2. In my package.json file, I stopped using craco by replacing craco start with react-scripts start. The final section looks like this: "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", },

After that, I was able to run npm run start and my app started up.

Daniel Wise
  • 58
  • 1
  • 7