Webpack + postcss not purging Tailwind - tailwind-css

Question

I'm trying to use webpack 5 and tailwind 2. The logs suggest that most things are set up correctly, but no purging is taking place.
I run NODE_ENV=production webpack --config webpack.prod.js
I have the following webpack configuration
mode: 'production',
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/i,
use: ['style-loader', 'css-loader', {
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require("tailwindcss")("./tailwind.config.js"),
require("autoprefixer"),
],
},
}
}, "sass-loader"],
}
tailwind.config.js
module.exports = {
purge: {
mode: 'layers',
layers: [],
content: ['./src/*.elm', './src/**/*.elm'],
},
theme: {
extend: {}
},
variants: {},
plugins: []
};
My production builds are still yielding 4mb bundles which tells me that no purging has taken place. I think I struggled before and switched to putting the options in a separate postcss.config.js but that shouldn't always be necessary?
In the command line logging I see
cacheable modules 4.14 MiB (javascript) 7.64 KiB (asset)
modules by path ./src/ 4.13 MiB (javascript) 7.64 KiB (asset)
modules by path ./src/*.scss 1.34 KiB
./src/styles.scss 439 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/styles.scss 930 bytes [built] [code generated]
./src/index.js + 1 modules 754 bytes [built] [code generated]
./src/Main.elm 159 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/tailwind.css 3.98 MiB [built] [code generated]

Answer 1

Try this:
module.exports = {
purge: {
mode: 'layers',
enabled: true, // This fixed it for me
layers: [],
content: ['./src/*.elm', './src/**/*.elm'],
},
theme: {
extend: {}
},
variants: {},
plugins: []
};