PostCSS 7 compat build dependency requiring PostCSS 8

Describe the problem:

It looks like @fullhuman/postcss-purgecss, which is a Tailwind dependency (^3.0.0), was updated to 3.1.0 recently. This version has purgecss@^3.1.0 as a dependency, which in turn has postcss@^8.2.1 as a dependency. So whenever I try to install the Tailwind PostCSS 7 compatibility build on a new project, I get @fullhuman/postcss-purgecss@3.1.0 installed, and the purge process returns an error which I have seen when using wrong versions of PostCSS and its plugins: [object Object] is not a PostCSS plugin.

Maybe locking the version to @fullhuman/postcss-purgecss@3.0.0 would solve the issue?

I am currently teaching Tailwind at the Open University of Catalonia (UOC) and some students are currently facing this issue. I tested the tools thoroughly when Tailwind 2 was released to make the switch for the students (which I was aware was a risky move), and it appeared to work, but it seems it broke a few days ago because of this. So could you please check if this is an issue and if there would be a quick way to fix it? (like recommending locking to @fullhuman/postcss-purgecss@3.0.0)

I also noted on the documentation the installation for the compatibility build was changed from npm install tailwindcss@compat to npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat. Is this related to this issue in any way?

Link to a minimal reproduction:

Reproduction steps would be installing the compatibility build on any project and checking that @fullhuman/postcss-purgecss@3.1.0 was installed, which has purgecss@^3.1.0 as a dependency, which in turn has postcss@^8.2.1 as a dependency.

I created this repo a week ago. You can see on the lockfile the version it got installed was @fullhuman/postcss-purgecss@3.0.0. But following the same steps today (cloning this repo [a starter project based on Parcel.js v1, so using PostCSS 7 and autoprefixer 8 by default] and installing Tailwind 2 compat build on top of it) would today install @fullhuman/postcss-purgecss@3.1.0 which I believe causes this issue.

[mattrothenberg]

EDIT I’ve seemed to resolve this by specifying a resolution for postcss in my package.json

"resolutions": {
  "postcss": "^7"
},

I can replicate this in a parcel project as well. My yarn.lock looks like the following after installing TW’s compatibility build (note the dependency on PostCSS 8 in the latter definition)

purgecss@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-2.3.0.tgz#5327587abf5795e6541517af8b190a6fb5488bb3"
  integrity sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==
  dependencies:
    commander "^5.0.0"
    glob "^7.0.0"
    postcss "7.0.32"
    postcss-selector-parser "^6.0.2"

purgecss@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-3.1.3.tgz#26987ec09d12eeadc318e22f6e5a9eb0be094f41"
  integrity sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==
  dependencies:
    commander "^6.0.0"
    glob "^7.0.0"
    postcss "^8.2.1"
    postcss-selector-parser "^6.0.2"

[illepic]

For anyone looking for the quick fix: npm i -D @fullhuman/postcss-purgecss@3.0 and then npm run build.