tailwindcss: New purge option not working with webpack
First of all, congrats in the new 1.4 release, the new purge option is awesome!
Recently I used it in a project built with Parcel and worked like a charm. However, I cannot make it work in another project built with webpack. Previously I was using the webpack PurgecssPlugin configuration, now I removed it and expected it to work with the following configuration:
// tailwind.config.js
module.exports = {
purge: ['./src/**/*.html', './src/**/*.tsx'],
theme: {},
variants: {},
plugins: [],
};
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
// ...
},
{
test: /\.css$/,
use: [
{loader: MiniCssExtractPlugin.loader},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: false,
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
],
},
],
}
}
I’ve tried removing the other loaders in case they interfered in any way, with no luck.
Am I missing something? 🤔
Thanks in advance.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 7
- Comments: 25 (4 by maintainers)
The issue is that webpack doesn’t set
process.env.NODE_ENVfor some stupid reason:https://github.com/webpack/webpack/issues/7074
So just update your production build scripts to set it yourself:
Thanks for looking into this @adamwathan, that is the issue indeed! For some reason declaring
NODE_ENV=productionin the script didn’t worked for me, so I did this instead inwebpack.config.js:For those coming to this issue in the future, the problem is because webpack uses a config key
modethat it passes to loaders and plugins, therefore it doesn’t need to depend nor change NODE_ENV. They implemented a flag recently--node-envthat you can pass when invokingwebpack.See this issue comment for more details: https://github.com/webpack/webpack-cli/issues/2362#issuecomment-771776945
Adam, it’s fantastic how much you care and invest and take time. You’re doing such a good job.
I can also confirm that the webpack-workaround by manually assigning
process.env.NODE_ENV = argv.mode;(or exportNODE_ENV=productionin the shell before callingwebpack) fixes this issue.I guess this can be closed.
Maybe an entry in the “Controlling File Size” docs could help lots of other people? Although this is not a tailwindcss issue in itself, I found the
postcss-importnote in the “Installation” documentation pretty useful as well.@adamwathan Sure! Here it is: https://github.com/lewislbr/tailwind-purge-webpack
That presentation has been also my introduction to tailwind. The moment I switched from ewww to woowww. 😄
@brycewray Cloned it down and ran it with
enabledremoved and it’s still purging as expected for me. I did have to runnpm install --save-dev postcss-clisince it wasn’t in your dependencies but used in your build scripts but otherwise didn’t make any changes 🤔Here’s the complete package.json:
Expand package.json
…and the complete tailwind.config.js file:
Expand tailwind.config.js
The command I ran to get these results was
npm run testbuild, after addingNODE_ENV=productionto the beginning of the command in the package.json file.@KL13NT Brilliant! I’ve been looking for a solution for a week. This is the first one that works! Thank you
@LeoniePhiline You really saved my day, awesome.
@LeoniePhiline awesome, thanks. The simple solution seems to work just fine 😃
@brycewray I had a similar problem, I thought cause maybe vue-cli, but final thing that fixed it was adding export before NODE_ENV=production in build script.
export NODE_ENV=production