Native tool to obfuscate Tailwind classes

[DamianGlowala]

As TailwindCSS is a set of HTML classes common to all of the developers using it, I started searching for a way to obfuscate all its classes with pseudo-random, unidentifiable class names whenever it's time to ship our project. It certainly won't stop others from being able to copy TailwindCSS-based websites, but will greatly discourage such attempts as the convenient link between class names and their assigned css styles is now randomized. It would require fair amount of work to reverse them back to their original class names.

Among the benefit outlined above, obfuscating classes may also decrease the overall size of bundled project files thanks to much shorter names. From -translate-x-full we receive something like a or ab, just to give an example. The more Tailwind classes our markup contains, the greater savings are in the final bundle size.

I came across the following webpack plugin: mangle-css-class-webpack-plugin. I refactored all the classes in my project to have them prefixed with tw-(...), which would make it easier for the plugin to detect Tailwind classes correctly with RegEx. I got partially satisfiable results, but never managed to enable obfuscation without some drawbacks (Nuxt.js project in SSR mode). I suspect the issue may lie in PurgeCSS Tailwind functionality, therefore having such feature provided by Tailwind and directly integrated with it would be great.

Any thoughts and comments on pros and cons (and any gotchas) of such feature are highly appreciated.

[josineto]

Just an idea: what if you write a PostCSS plugin instead? That way, your plugin could be run after Tailwind (and PurgeCSS, and also autoprefixer), obfuscating only classes actually used.

[sonofmagic]

Hi, i write a plugin to obfuscate tailwindcss classes. you can have a try.
npm: unplugin-tailwindcss-mangle
source code: https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/unplugin-tailwindcss-mangle

Now, this plugin support webpack and vite.it work's when webpack/vite build your app.

[sovetski]

does it generates a json file where we can find all mapped class names? like does this one https://www.npmjs.com/package/postcss-obfuscator