Tailwind "PostCSS plugin tailwindcss requires PostCSS 8" in CI

By Daniel Zoghalchali·Latchkey

Tailwind's PostCSS plugin checks the PostCSS major version at load time. When PostCSS 7 is resolved instead of 8, Tailwind refuses to run and prints a version-mismatch error.

What this error means

The CSS build fails with "It looks like you're trying to use tailwindcss with PostCSS 7" or "PostCSS plugin tailwindcss requires PostCSS 8".

Error: It looks like you're trying to use tailwindcss with PostCSS 7.
However, this version of Tailwind CSS requires PostCSS 8.
Please upgrade your PostCSS installation.

Common causes

An old PostCSS 7 is hoisted in CI

A different dependency pulls PostCSS 7, and a clean CI install resolves it ahead of 8, so Tailwind sees the wrong major.

A toolchain still expects the PostCSS 7 compatibility build

A legacy build pipeline pinned the old @tailwindcss/postcss7-compat, which conflicts with a modern Tailwind expecting PostCSS 8.

How to fix it

Install PostCSS 8

1. Add postcss@^8 and autoprefixer as devDependencies.
2. Remove any postcss7 compatibility package.
3. Reinstall and re-run the CSS build.

npm install --save-dev postcss@^8 autoprefixer tailwindcss

Deduplicate PostCSS

If multiple PostCSS versions are installed, dedupe so only 8 remains on the resolution path.

npm dedupe postcss

How to prevent it

• Pin postcss@^8 so the Tailwind plugin always finds a compatible major.
• Drop legacy postcss7 compatibility packages when upgrading Tailwind.
• Run a clean install in CI so hoisting differences surface early.

Frequently asked questions

Related guides

References

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