PostCSS error "tailwindcss requires PostCSS 8" when npm start

Question

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 · Accepted Answer · 2021-11-01 06:31:56Z

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.

edited Nov 1, 2021 at 6:31

answered Oct 29, 2021 at 5:26

Chi

3262 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Wise · Accepted Answer · 2022-06-10 22:37:49Z

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:

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
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.

answered Jun 10, 2022 at 22:37

Daniel Wise

581 silver badge7 bronze badges

Collectives™ on Stack Overflow

PostCSS error "tailwindcss requires PostCSS 8" when npm start

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related