Obfuscate Tailwind CSS classes

[hmaesta]

For performance proposes, everything that can be made to improve final bundle size is welcome. Even better if automated.

As feature request, would be nice to obfuscate classes on production bundle. Using webpack-obfuscator, for example.

Example

Original code:

# index.vue
<div class="text-gray-500">Hey!</div>

# tailwind.css
.text-gray-500 { color: #888; }

Final code:

# index.html
<div class="a">Hey!</div>

# tailwind.css
.a { color: #888; }

[atinux]

If you want to experiment it, please go ahead :)

I don't know the side effects regarding Tailwindcss purge option.

[684efs3]

Would love this. Someone mentioned that this could work? I haven't tried it: https://github.com/sndyuk/mangle-css-class-webpack-plugin

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[atinux]

Not stale

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gekkedev]

not stale

[nephix]

Anyone managed to do this?

[gggglglglg]

Any news?
I tried mangle-css-class-webpack-plugin, but it doesn't work for me

[thienna]

Up

[estige]

up

[ineshbose]

Reopened issue but it could take a while to solve this. PR is more than welcome. 🙂

[ineshbose]

Has anyone taken a look at tailwindcss-mangle yet?

[JenuelDev]

is webpack works with vite? or nuxt?