can run npm run dev but not prod using compat mode

[snapey]

I can successfully run npm run dev but when running npm run prod I get the error;

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-purgecss requires PostCSS 8.

This is an upgraded system (Laravel 6 to 7 to 8, and Tailwind 1.4 to 2)

I had this problem initially but then followed the compatibility instructions and got the dev build working.

webpack.mix

const mix = require('laravel-mix');
require('laravel-mix-purgecss');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .purgeCss();
   

resources/css/app.css

@tailwind base;

@tailwind components;

@tailwind utilities;

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/postcss7-compat": "^2.0.4",
        "autoprefixer": "^9.8.6",
        "axios": "^0.19.2",
        "bootstrap": "^4.6.0",
        "cross-env": "^5.1",
        "jquery": "^3.6.0",
        "laravel-mix": "^4.0.7",
        "laravel-mix-purgecss": "^4.2.0",
        "lodash": "^4.17.21",
        "popper.js": "^1.16.1",
        "postcss": "^7.0.35",
        "resolve-url-loader": "2.3.1",
        "sass": "^1.32.8",
        "sass-loader": "7.*",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4",
        "vue": "^2.6.12",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@tailwindcss/forms": "^0.2.1"
    }
}

tailwind-config.js

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}