TypeError: Cannot convert undefined or null to object

[dakralex]

I hope I don't create duplicate, but I recently decided to drop IE11 support in my projects, and now I'm upgrading my Laravel Mix Setup to PostCSS 8 and Tailwind 2.0. The problem is that I can't even run npm run prod without getting an error -- with all custom properties commented in my tailwind.config.js. My files look like this:

package.json

...
"devDependencies": {
    "autoprefixer": "^10.2.5",
    "cross-env": "^7.0.3",
    "laravel-mix": "^6.0.13",
    "postcss-import": "^14.0.0",
    "postcss-nested": "^5.0.5",
    "postcss-preset-env": "^6.7.0",
    "tailwindcss": "^2.0.3",
    "vue-template-compiler": "^2.6.12"
},
"peerDependencies": {
    "postcss": "^8.2.7"
}

webpack.mix.js

mix.postCss("resources/css/site.css", "public/css", [
  require("postcss-import"),
  require("tailwindcss"),
  require("postcss-nested"),
  require("postcss-preset-env")
]);

tailwind.config.js

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

module.exports = {
	purge: {
		mode: 'all',
		content: [
			'./resources/**/*.antlers.html',
			'./resources/**/*.vue',
			'./resources/**/*.js',
			'./content/**/*.md',
		]
	},
	presets: [],
	darkMode: false,
	important: false,
	theme: {
		screens: {
			sm: '40rem',
			md: '48rem',
			lg: '64rem',
			xl: '80rem',
			'2xl': '96rem',
		},
		extend: {},
	},
	variants: {
		extend: {},
	},
	plugins: [],
};

site.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

And the error that I get in console:

npm run prod

> prod
> npm run production


> production
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js


× Mix
  Compiled with some errors in 1.04s

ERROR in ./resources/css/site.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at flattenColorPalette (C:\www\statamic\template\node_modules\tailwindcss\lib\util\flattenColorPalette.js:8:67)
    at C:\www\statamic\template\node_modules\tailwindcss\lib\plugins\divideColor.js:27:53
    at C:\www\statamic\template\node_modules\tailwindcss\lib\util\processPlugins.js:69:5
    at Array.forEach (<anonymous>)
    at _default (C:\www\statamic\template\node_modules\tailwindcss\lib\util\processPlugins.js:63:11)
    at C:\www\statamic\template\node_modules\tailwindcss\lib\processTailwindFeatures.js:64:54
    at LazyResult.runOnRoot (C:\www\statamic\template\node_modules\postcss\lib\lazy-result.js:303:16)
    at LazyResult.runAsync (C:\www\statamic\template\node_modules\postcss\lib\lazy-result.js:355:26)
    at async Object.loader (C:\www\statamic\template\node_modules\postcss-loader\dist\index.js:95:14)
    at processResult (C:\www\statamic\template\node_modules\webpack\lib\NormalModule.js:598:19)
    at C:\www\statamic\template\node_modules\webpack\lib\NormalModule.js:692:5
    at C:\www\statamic\template\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\www\statamic\template\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\www\statamic\template\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (C:\www\statamic\template\node_modules\postcss-loader\dist\index.js:104:7)

What could I do? I tried a lot of commenting and installing packages in npm explictly, why does this error happen? I can't trace this back to anything I'd understand. I almost spend 5 hours on figuring this out.

[simonswiss]

Hey - are you able by any chance to share your project repo so we can help troubleshoot? Or, if not possible, a minimal reproduction?