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):
tailwindcss/postcss7-compat": "^2.2.17”
, PostCSS ^7.0.39
and autoprefixer": "^9.8.8
tailwindcss:"^2.2.17"
, autoprefixer:"^10.4.0"
, and PostCSS ^8.3.11
node v16.13.0
,craco: "^6.4.0"
, and react-scripts:"^4.0.3"
.--openssl-legacy-provider
in start scriptnpm install
{
"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"
}
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.