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.:-)