Why is Purge Option in Tailwind not working with Webpack

Viewed 3174

I set up Webpack with Tailwind and everything seems to work fine except the purging. The file is 4mb and I can see all of the tailwind utility classes in there. For the last 30 minutes I tried to find a solution but nothing works.

Here is my package.json with the script "build" and all the dependencies:

{
 "name": "MemeGenerator",
 "version": "1.0.0",
 "description": "",
 "private": true,
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack --config webpack.prod.js",
   "watch": "webpack --watch --config webpack.dev.js"
 },
 "repository": {
   "type": "git",
   "url": "git+https://github.com/MB9900/MemeGenerator.git"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "bugs": {
   "url": "https://github.com/MB9900/MemeGenerator/issues"
 },
 "homepage": "https://github.com/MB9900/MemeGenerator#readme",
 "devDependencies": {
   "autoprefixer": "^10.2.5",
   "css-loader": "^5.1.3",
   "html-webpack-plugin": "^5.3.1",
   "postcss": "^8.2.8",
   "postcss-cli": "^8.3.1",
   "postcss-loader": "^5.2.0",
   "style-loader": "^2.0.0",
   "tailwindcss": "^2.0.3",
   "webpack": "^5.26.0",
   "webpack-cli": "^4.5.0",
   "webpack-dev-server": "^3.11.2",
   "webpack-merge": "^5.7.3"
 }
}

Here is webpack.common

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                include: path.resolve(__dirname, 'src/css'),
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }
        ]
    }
};

Here is webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = merge(common, {
    mode: 'production',
    output: {
        filename: '[name].[contenthash].js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.[contenthash].html',
            template: 'src/html/index.html'
        })
    ],
});

Here is postcss.config.js


module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

And lastly: tailwind.config.js

module.exports = {
    purge: {
        enable: true,
        content: [
            './src/**/*.html',
            './src/**/*.js'
        ]
    },
    darkMode: false,
    theme: {
      extend: {},
    },
    variants: {
    extend: {},
    },
    plugins: [],
  };
2 Answers

It seems like "NODE_ENV" was not set to "production". I tried to fix this in tailwind.config.js with "enable: true", however it is enabled: true. Now it works fine.

With webpack make sure you also forcibly set the mode option to production

webpack --config webpack.prod.js  --mode=production --progress
Related