Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin

I am getting this error whenever I run npm start. I tried a couple of fixes but none of them work for me. I tried to change the version of autoprefixer to 9.8.6 but it didn't work. Please help me with this issue

This is my package.json

{
  "name": "reactgallery",
  "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",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "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/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/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",
    "postcss-cli": "^7.1.2",
    "tailwindcss": "^1.8.10"
  }
}

Quick fix

Downgrade your autoprefixer to version 9, use

> "autoprefixer": "^9.0.0"

in your dev dependencies.

More details

PostCSS was updated to version 8, however, PostCSS CLI has not yet been updated to handle PostCSS plugins which use the new PostCSS 8+ API. Autoprefixer uses the new PostCSS 8 API since version 10.

This is documented under known issues in the PostCSS GitHub page.

Once PostCSS CLI is updated to handle plugins that use the new PostCSS 8+ API, this will likely not be an issue. But until then, you may need to downgrade some PostCSS plugins to avoid errors.

If you're having this problem and you're using Tailwind CSS v2, try this

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

source: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

I am not sure about this but can you try installing postcss as a dependency?

npm i postcss

Ok, to me was fixed removing package-lock.json and installing:

"tailwindcss": "^1.8.10"
"postcss-cli": "^7.1.0"
"autoprefixer": "^9.7.5"

"dependencies": {
    "autoprefixer": "^9.8.6",
    "postcss": "^8.0.0",
    "postcss-cli": "^8.1.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
},

Dependecies object and version can be modified directly in the package.json file and it work

Based on documentation link are drop some support for old NodeJS and you must upgrade manually the packages. Example in my case for a project based on webpack need just to update those dependencies:

  "dependencies": {
    "autoprefixer": "^10.0.2",
    "postcss": "^8.1.7",
    "postcss-loader": "^4.0.4"
  }

So you do not need to downgrade autoprefixer :)

the following combo works as of Oct 2020

  ...
  "dependencies": {
    "autoprefixer": "^9.8.6",
    "postcss-cli": "^8.1.0",
    "tailwindcss": "^1.9.2"
  }

These steps worked for me. This was from github

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Using the official solution fix for PostCSS 7 compatibility build

yarn remove tailwindcss postcss autoprefixer
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

For Next.js 10 you just have to do

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Source This issue here

I had this problem with Laravel-mix 5 and PostCSS 8 and Tailwind 2.
With Laravel-mix 6 (beta at the moment) this was solved.

npm install laravel-mix@next --save-dev

Its Simple,

npm install postcss@^8 

It worked very well for me.