Erro: o autoprefixer do plugin PostCSS requer PostCSS 8. Atualize o PostCSS ou faça downgrade deste plugin

Question

Estou recebendo este erro sempre que executo o npm start. Tentei algumas correções, mas nenhuma delas funcionou para mim. Tentei mudar a versão do autoprefixer para 9.8.6, mas não funcionou. Por favor me ajude com este problema

Este é o meu 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"
  }
}

Answer 1

Conserto rápido

Faça downgrade do seu autoprefixer para a versão 9, use

"autoprefixer": "^ 9.0.0"

em suas dependências de desenvolvimento.

Mais detalhes

PostCSS foi atualizado para a versão 8, entretanto, PostCSS CLI ainda não foi atualizado para lidar com plugins PostCSS que usam a nova API PostCSS 8+. O Autoprefixer usa a nova API PostCSS 8 desde a versão 10.

Isso está documentado em problemas conhecidos na página PostCSS GitHub.

Depois que o PostCSS CLI for atualizado para lidar com plug-ins que usam a nova API PostCSS 8+, isso provavelmente não será um problema. Mas, até então, você pode precisar fazer o downgrade de alguns plug-ins PostCSS para evitar erros.

Answer 2

Não tenho certeza sobre isso, mas você pode tentar instalar o postcss como uma dependência?

npm i postcss

Answer 3

Se você está tendo esse problema e está usando Tailwind CSS v2, tente este

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

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

Answer 4

Ok, para mim foi corrigido removendo package-lock.json e instalando:

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

Answer 5

a seguinte combinação funciona a partir de outubro de 2020

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

Answer 6

Com base no link de documentação, descartar algum suporte para NodeJS antigo e você deve atualizar manualmente os pacotes. Exemplo no meu caso para um projeto baseado em webpack preciso apenas atualizar essas dependências:

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

Portanto, você não precisa fazer o downgrade do autoprefixer :)

Answer 7

Essas etapas funcionaram para mim. Isso era do 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

Answer 8

Para Next.js 10, você só precisa fazer

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Fonte Este problema aqui

Answer 9

Eu tive esse problema com o Laravel-mix 5 e PostCSS 8 e Tailwind 2.
Com o Laravel-mix 6 (beta no momento) isso foi resolvido.

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

Answer 10

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

O objeto e a versão das dependências podem ser modificados diretamente no package.jsonarquivo e funcionam