Obfuscated TailwindCSS(Beta)

Transform your readable Tailwind utility classes into optimized, obfuscated CSS that protects your code, reduces bundle size, and enhances performance.

View Examples View on GitHub
className="flex items-center justify-center p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition-colors transform hover:scale-105 border-2 border-blue-300 font-semibold"
className="x1y2z3a4 b5c6d7e8 f9g0h1i2 j3k4l5m6 n7o8p9q0 s3o4xyzp1 a2b3c4d5 e6f7g8h9 k1l2m3n4 o5p6q7r8 s9t0u1v2 w3x4y5z6"

Note: Actual obfuscation happens automatically during build

Quick Setup

1

Install Dependencies

Add uuid and glob packages to your project

npm install uuid && npm install -D glob @types/uuid
2

Add Obfuscation Script

Create the obfuscation script in your project

scripts/obfuscate-tailwind.js
3

Update Build Script

Modify your package.json build command

"build": "node scripts/obfuscate-tailwind.js && next build"
4

Add CSS Import

Import the generated CSS in your layout

import "./obfuscated-styles.css";

Ready to contribute?

This is still in development - we welcome your feedback and contributions to help make it better!

View on GitHub

created by Naymur