Purge-Problem

[coolskin2b]

Hello,
First thanks for what you have done Stefan.
I m looking about the result of the build optimization for the css and i always got 3mo of css file.
I m new with thailwind and webpack.
I found this doc about purgecss and webpack :
https://purgecss.com/plugins/webpack.html#usage
after added :

yarn add purgecss-webpack-plugin --dev

i added this lines in webpack.prod.js

const PurgecssPlugin = require('purgecss-webpack-plugin')
  ...

  new Dotenv({
    path: './.env.production',
  }),
  // Extracts CSS into separate files
  // Note: style-loader is for development, MiniCssExtractPlugin is for production
  new MiniCssExtractPlugin({
    filename: 'styles/[name].[contenthash].css',
    chunkFilename: '[id].css',
  }),
// added this lines :
    new PurgecssPlugin({
    paths: glob.sync(`${paths.src}/**/*`, { nodir: true }),
  }),
// end of lines
],

When i have done that the css file size now is : 3 ko.

Do you think this is the good way to reduce the css size or i m wrong and i miss something with your project?

Thanks in advance.

[avrapaulo]

Hey, you don't need to install any additional packages because tailwindcss already gives you this functionality. Everything is set up for that just a little detail is missing. Change this 25 line in package.json

"build": "NODE_ENV=production webpack --config config/webpack.prod.js",

Now it removes unused CSS you will have around 5kb files.

[stefanwuthrich]

First of all, tk you @coolskin2b to point this out.
And tk you @avrapaulo for the solution which is obviously correct. I somewhere removed that and....
It's fixed now. Tks to both.:-)