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

Question

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"
  }
}

Erund

Answer 1

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.

Iroquoian

Thanks for your response.This didn't work for me. I'm still getting this error. Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin. – Erund

@RishiPurwar did you delete your node_modules folder and run npm install or yarn install ? – Outguess

Update: postcss-cli v8 supports postcss v8 – Buckeye

Yes, postcss-cli v8 currently supports postcss v8 – Iroquoian

"@tailwindcss/postcss7-compat": "^2.2.4", "autoprefixer": "^9.8.6", "postcss": "^7.0.35", use these combination. it should work.. – Jaimiejain

npm install --save-dev autoprefixer@^9.0.0 helped me – Belton

Answer 2

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

npm i postcss

Dibbell

Answer 3

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

Jayme

when you run the command in MacOS, you might encounter the issue zsh: no matches found: postcss@^7. try to run this npm install tailwindcss@npm:@tailwindcss/postcss7-compat 'postcss@^7' 'autoprefixer@^9' reference: github.com/tailwindlabs/tailwindcss/discussions/3575 – Ozonosphere

Answer 4

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

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

Tonsillectomy

Removing the package-lock did it for me. But I'm using ^9.8.5. – Ealdorman

Answer 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

Glavin

in April 2021, this was the only combination working for me without error in a react-tailwind setup, probably due to the tailwind-compat-build. – Idem

Answer 6

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

Lumpkin

Answer 7

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 :)

Neoclassic

Works for me - was not able to add "post-css" package via terminal but after adding the line manually into package.json and reinstalling everything was fine. – Grove

YAY! Thank you! This actually worked. This has been haunting me for what feels like years. This works with gulp-postcss plugin which is great :) To think the answer was as simple as "just manually install the packages" – Band

Answer 8

the following combo works as of Oct 2020

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

Underquote

Answer 9

For Next.js 10 you just have to do

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Source This issue here

Sideburns

Answer 10

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

Perloff

Answer 11

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

Mannequin

Answer 12

Its Simple,

npm install postcss@^8 

It worked very well for me.

Scrimp