PostCSS "plugin requires PostCSS 8" - Fix in CI

By Kaveh Alemi·Latchkey

A modern PostCSS plugin needs PostCSS 8's API, but an older dependency dragged PostCSS 7 into the tree. The two versions coexist and the plugin loads against the wrong one.

What this error means

The build errors with Plugin X requires PostCSS 8. or It looks like you are using PostCSS 7. Often appears after upgrading autoprefixer or Tailwind.

Error: Loading PostCSS Plugin failed: It looks like you're using
PostCSS 7. PostCSS 8+ is required.

(@autoprefixer) postcss.config.js

Common causes

Mixed PostCSS 7 and 8 in the tree

An old build tool depends on postcss@7 while a new plugin needs postcss@8, so both are installed and the plugin binds to v7.

Loader pinned to PostCSS 7

An old postcss-loader brings its own postcss@7. Upgrading the loader resolves the API to v8.

How to fix it

Upgrade to a single PostCSS 8

1. Install postcss@8 directly.
2. Upgrade the loader and any tool that pinned postcss@7.
3. Dedupe.

npm install -D postcss@^8 postcss-loader@latest autoprefixer@latest
npm dedupe

Find the PostCSS 7 culprit

1. List which dependency still requires postcss@7, then upgrade or replace it.

npm ls postcss

How to prevent it

• Keep PostCSS and its plugins on the same major version.
• Run npm ls postcss after dependency bumps to catch duplicate majors.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation