Fix Tailwind 'unable to resolve dependency tree' in Next.js

The “unable to resolve dependency tree” error when installing Tailwind in a Next.js project is a peer dependency conflict: Tailwind wants a newer PostCSS than the one already in your project. Installing tailwindcss@latest together with postcss@latest fixed it for me.

While setting up a new Next.js project with Tailwind I ran into this issue.

This issue might just be a temporary issue due to configuration problems and libraries versions, but I’m writing this in case someone stumbles on it.

I ran:

npm install tailwindcss postcss-preset-env postcss-flexbugs-fixes

In other words, PostCSS 8.1.13 was required but Next installed 8.1.7.

What the error means

The ERESOLVE code comes from npm 7. Starting with that version, npm treats peer dependency conflicts as hard errors, while npm 6 only printed a warning and carried on.

Tailwind declares PostCSS as a peer dependency: it expects your project to provide a compatible PostCSS version. My project already had the 8.1.7 that Next.js brought in, the packages I was installing wanted at least 8.1.13, and npm refused to build a tree where both claims are true.

So nothing was broken in Tailwind or Next.js. The two just disagreed on which PostCSS version should be present.

The fix

Install the latest Tailwind and, in the same command, an explicit up to date PostCSS:

npm install tailwindcss@latest postcss@latest postcss-preset-env postcss-flexbugs-fixes

and it worked!

Adding postcss@latest puts a version in the tree that satisfies every peer requirement, so npm can resolve it and the install goes through.

The workaround I’d avoid

You’ll find --legacy-peer-deps suggested for every ERESOLVE error:

npm install tailwindcss --legacy-peer-deps

The flag tells npm 7 to behave like npm 6 and ignore the conflict. It gets you past the error, but the mismatched versions are still there, and PostCSS plugins built for version 8 can fail in confusing ways when an older version loads them at build time.

If a compatible version exists, install it explicitly like we did above. That solves the conflict instead of hiding it.

At the time, Tailwind also published a separate PostCSS 7 compatibility build for projects stuck on the older PostCSS. Upgrading PostCSS itself was the cleaner way out, and it’s the one that worked here.