Build error when using the postcss plugin in Laravel Mix 6

When building (both prod and dev) the project, I am getting an error:

~ yarn dev
yarn run v1.22.10
$ mix
[webpack-cli] Compilation finished

npm ERR! code 1
npm ERR! path /path/to/project
npm ERR! command failed
npm ERR! command sh -c webpack --progress '--config=/path/to/project/node_modules/laravel-mix/setup/webpack.config.js'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/george/.npm/_logs/2020-12-22T11_23_05_264Z-debug.log

Any clues what I'm doing wrong?

When I disable the tailwindcss plugin in postcss, the build runs without errors. (though the tailwind classes are obviously not generated).

The log file doesn't tell me much:

cat /Users/george/.npm/_logs/2020-12-22T11_23_05_264Z-debug.log
0 verbose cli [
0 verbose cli   '/usr/local/Cellar/node/15.4.0/bin/node',
0 verbose cli   '/usr/local/lib/node_modules/npm/bin/npm-cli.js',
0 verbose cli   'exec',
0 verbose cli   '--',
0 verbose cli   'webpack',
0 verbose cli   '--progress',
0 verbose cli   '--config=/path/to/project/node_modules/laravel-mix/setup/webpack.config.js'
0 verbose cli ]
1 info using npm@7.0.15
2 info using node@v15.4.0
3 timing config:load:defaults Completed in 1ms
4 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 1ms
5 timing config:load:builtin Completed in 1ms
6 timing config:load:cli Completed in 2ms
7 timing config:load:env Completed in 0ms
8 timing config:load:file:/path/to/project/.npmrc Completed in 0ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:/Users/george/.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 2ms
16 timing config:load:setUserAgent Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 8ms
19 verbose npm-session a8f799bcfd43acb4
20 timing npm:load Completed in 15ms
21 timing command:exec Completed in 2924ms
22 verbose stack Error: command failed
22 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/index.js:64:27)
22 verbose stack     at ChildProcess.emit (node:events:376:20)
22 verbose stack     at maybeClose (node:internal/child_process:1063:16)
22 verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:295:5)
23 verbose cwd /Users/george/Sites/gymme
24 verbose Darwin 20.2.0
25 verbose argv "/usr/local/Cellar/node/15.4.0/bin/node" "/usr/local/lib/node_modules/npm/bin/npm-cli.js" "exec" "--" "webpack" "--progress" "--config=/path/to/project/node_modules/laravel-mix/setup/webpack.config.js"
26 verbose node v15.4.0
27 verbose npm  v7.0.15
28 error code 1
29 error path /Users/george/Sites/gymme
30 error command failed
31 error command sh -c webpack --progress '--config=/path/to/project/node_modules/laravel-mix/setup/webpack.config.js'
32 verbose exit 1

My mix file:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
    .js('resources/js/app.js', 'public/js')
    .js('resources/js/admin.js', 'public/js')
    .copy('resources/images', 'public/images')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import-url'),
        require('tailwindcss'),
    ])
    .sourceMaps()
;

if (mix.inProduction()) {
    mix.version();
}

Tailwind config:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
                heading: ['Asap', ...defaultTheme.fontFamily.sans],
                logo: ['Leckerli One', ...defaultTheme.fontFamily.sans],
            },
        },
        typography: {
            default: {
                css: {
                    a: {
                        color: defaultTheme.colors.orange[600],
                        '&:hover': {
                            color: defaultTheme.colors.orange[700],
                        },
                    },
                },
            },
          },
    },
    variants: {
        backgroundColor: ['responsive', 'hover', 'focus', 'odd', 'even', 'group-hover'],
        cursor: ['responsive', 'disabled'],
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
        textColor: ['responsive', 'hover', 'focus', 'group-hover'],
    },
    purge: {
        content: [
            './app/**/*.php',
            './resources/**/*.html',
            './resources/**/*.js',
            './resources/**/*.jsx',
            './resources/**/*.ts',
            './resources/**/*.tsx',
            './resources/**/*.php',
            './resources/**/*.vue',
            './resources/**/*.twig',
        ],
        options: {
            defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
            whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/, /date-input-polyfill/],
        },
    },
    plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
};

package json

{
    "private": true,
    "scripts": {
        "dev": "mix",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "mix --production",
        "production": "mix --production"
    },
    "devDependencies": {
        "autoprefixer": "^10.1.0",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0",
        "postcss": "^8.2.1",
        "postcss-import-url": "^6.0.0",
        "resolve-url-loader": "^3.1.0"
    },
    "dependencies": {
        "@ryangjchandler/alpine-clipboard": "^0.1.2",
        "@sentry/browser": "^5.20",
        "@sentry/tracing": "^5.21",
        "@tailwindcss/aspect-ratio": "^0.2.0",
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.1",
        "alpinejs": "^2.0",
        "body-scroll-lock": "^3.1",
        "date-input-polyfill": "^2.14",
        "easymde": "^2.11",
        "tailwindcss": "^2.0.2"
    }
}

tailwindlabs / tailwindcss

Build error when using the postcss plugin in Laravel Mix 6 #3168