PostCSS 8 requirement even with npm:@tailwindcss/postcss7-compat

What version of Tailwind CSS are you using?

npm:@tailwindcss/postcss7-compat

What build tool (or framework if it abstracts the build tool) are you using?

N/A

What version of Node.js are you using?

14.17.1

What browser are you using?

N/A

What operating system are you using?

Windows

Reproduction repository

https://github.com/joshcomley/bugs-tailwindpostcss

Describe your issue

After following the guidelines on avoiding PostCSS plugin tailwindcss requires PostCSS 8., I still get the message.

Here is a simple repro where I am unable to compile tailwind at all in its most basic way, even with all the correct “compat” packages installed.

To see this in action:

• Clone the repo
• Install packages
• Run yarn build:css

[mpalmer685]

I ran into this issue, too. Reverting to a version earlier than 2.2.0 does fix it.

If you need this, you can change the dependency in your package.json to: "tailwindcss": "npm:@tailwindcss/postcss7-compat@2.1.4"

[adamwathan]

Hey! In this case there is no reason to use the PostCSS 7 build since you aren’t actually running PostCSS yourself. To get things building in your repo you have a few options:

1. Just use the latest version. If you aren’t actually trying to integrate with an existing PostCSS pipeline, there’s no need to use the PostCSS 7 version:

     {
       "name": "twtest",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
         "build:css": "tailwind build -i src/index.css -o src/build.css",
         "test": "echo \"Error: no test specified\" && exit 1"
       },
       "author": "",
       "license": "ISC",
       "devDependencies": {
   -     "autoprefixer": "9",
   -     "postcss": "7",
   -     "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   +     "tailwindcss": "^2"
       },
     }
   

2. Integrate with PostCSS in a PostCSS 7 project. If you actually are integrating with PostCSS 7, things will work since you won’t be using our CLI. Here’s an example using postcss-cli, it works as expected:

     {
       "name": "twtest",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
   -     "build:css": "tailwind build -i src/index.css -o src/build.css",
   +     "build:css": "postcss src/index.css -o src/build.css",
         "test": "echo \"Error: no test specified\" && exit 1"
       },
       "author": "",
       "license": "ISC",
       "devDependencies": {
         "autoprefixer": "9",
         "postcss": "7",
   +     "postcss-cli": "^7",
         "tailwindcss": "npm:@tailwindcss/postcss7-compat"
       }
     }
   
   

I’ll make a note to consider replacing the CLI in the compat build with a simple script that just throws an error, since there’s no reason for our actual CLI tool to have a PostCSS 7 version.

We will be dropping PostCSS 7 support in November when Tailwind CSS v3 is release for what it’s worth, so hopefully the rest of the ecosystem (I think really just CRA) catches up by then. I’d recommend using Vite instead of CRA personally, does all the same stuff but is faster and more modern.