How can I obfuscate Tailwindcss HTML classnames in production?

Question

How can I obfuscate the HTML classnames in production when using Tailwindcss? My project uses React.js and CRACO as per tailwind's documentation.

Cresset

Maybe this can help you out github.com/sndyuk/mangle-css-class-webpack-plugin Other than that: think about if its really necessary – Pyrogallol

Sure, what's the point of hiding that? It's the web after all. – Vidovic

its useless, whats the point doing that. tailwindcss is utility based framework & it has huge css properties & classnames. obfuscating makes building slower & slower as project grows. so I prefer not to do it. – Jacky

I understand if someone was intent on copying the website they could, but at a minimum, I still prefer to minify or obscure the classnames as it does slow-down and deter those not comfortable with coding. – Cresset

Pretty sure that the tools that copy a website, do copy the actual final CSS and not all the subclasses. – Vidovic

@Cresset if you are fighting something like httrack then obfuscating class names is pretty much useless. – Disaccustom

Answer 1

Must Check this First https://github.com/tailwindlabs/tailwindcss/discussions/11179

UnoCSS does this:

Install by yarn or npm

yarn add -D @unocss/transformer-compile-class

Create uno.config.ts in your project

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerCompileClass from '@unocss/transformer-compile-class'

export default defineConfig({
  // ...
  transformers: [
    transformerCompileClass(),
  ],
})

Check Out Full Detail Docs https://unocss.dev/transformers/compile-class

Coppery

Still looks like an awful thing to do with no real benefits. – Vidovic