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: [],
};