I just dug around a bit and found this https://github.com/sndyuk/mangle-css-class-webpack-plugin which I'm currently testing and having very good results with.. seems very promising

[paulwongx]

I just dug around a bit and found this https://github.com/sndyuk/mangle-css-class-webpack-plugin which I'm currently testing and having very good results with.. seems very promising

Originally posted by @vesper8 in tailwindlabs/discuss#456 (comment)

@vesper8 Can you share your craco.config.js when using mangle-css-class-webpack-plugin? This doesn't seem to be working for me.

const MangleCssClassPlugin = require('mangle-css-class-webpack-plugin');

// craco.config.js
module.exports = {
	style: {
		postcss: {
			plugins: [
				require('tailwindcss'),
				require('autoprefixer'),
				new MangleCssClassPlugin({
					classNameRegExp: '^[\w]*[\:]?[\w]*[\-\:]?[\w|\d]*[\-]?[\w|\d]*[\-]?[\w|\d]*',
					log: true,
				}),
			],
		},
	},
};

I get the error:
Error: [object Object] is not a PostCSS plugin

[vesper8]

Don't know what a craco.config.js is and I haven't actually tried to use this in a while. But have you read sndyuk/mangle-css-class-webpack-plugin#6 ?

I got all my answers from there and by the end it was working perfectly

I have this block of code inside my vue.config.js file which might be of help

const obfuscate = true;
if (obfuscate && process.env.NODE_ENV === 'production') {
  const JavaScriptObfuscator = require('webpack-obfuscator');
  const MangleCssClassPlugin = require('mangle-css-class-webpack-plugin');

  const jsObfuscatorPlugin = new JavaScriptObfuscator({
    rotateUnicodeArray: true,
  }, [
  // '**/app.*.js',
  // '**/chunk-*.js',
    '**/chunk-vendors.*.js',
    '**/components--tables.*.js',
  ]);

  plugins.push(jsObfuscatorPlugin);

  const cssObfuscatorPlugin = new MangleCssClassPlugin({
    classNameRegExp: '((hover|focus|active|disabled|visited|first|last|odd|even|group-hover|focus-within|xs|sm|md|lg|xl)(\\\\\\\\\\\\\\\\|\\\\)?:)*(tw-|answer-|quiz-)[a-zA-Z0-9_-]*(\/[0-9])?',
    ignorePrefixRegExp: '((hover|focus|active|disabled|visited|first|last|odd|even|group-hover|focus-within|xs|sm|md||lg|xl)(\\\\\\\\\\\\\\\\|\\\\)?:)*',
    reserveClassName: [
      'fa', //
      'fas',
      'far',
    ],
    log: true,
  });

  plugins.push(cssObfuscatorPlugin);
}