Is there a way to obfuscate TailwindCSS classnames using PostCSS for React project in Vitejs? - reactjs

Question

Currently building a React project with ViteJs, which uses TailwindCSS & PostCSS.
I would like the tailwind classnames to be obfuscated in the production build. Like object-cover to a2. Also, I am not aiming for minification.
I have tried looking for solutions but no luck.
Here is the postcss config:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

Answer 1

with the following code I managed to replace the classnames only in the css file, i can't find a way to replace it in the javascript as well, hope to find some solution soon.
vite.config.js
import {defineConfig} from 'vite'
import react from '#vitejs/plugin-react'
import {createHtmlPlugin} from "vite-plugin-html";
import postcssRename from "postcss-rename";
import tailwindcss from "tailwindcss";
export default async ({mode}) => {
return defineConfig({
plugins: [
react(),
createHtmlPlugin({
minify: true,
}),
],
css: {
postcss: {
plugins: [
tailwindcss(('./tailwind.config.cjs')),
postcssRename({
strategy: (input)=>{
return random(6)
},
outputMapCallback: function (map) {
console.log(JSON.stringify(map));
}
})
]
}
},
server: {
host: '0.0.0.0',
port: 9000
}
});
};
function random(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}