📖 Full documentation

👉 josedacosta.github.io/tailwindcss-obfuscator

Setup guides for every framework, the complete options reference, the patterns that obfuscate (and the ones that don't), the comparison with tailwindcss-mangle, and more.

Why

tailwindcss-obfuscator rewrites verbose Tailwind utility classes (bg-blue-500, flex) into short opaque identifiers (tw-a, tw-b) at build time. The shipped HTML / CSS / JS bundles get 30–60 % smaller on CSS-heavy pages and your design system becomes much harder to reverse-engineer. Source code stays readable.

Install

pnpm add -D tailwindcss-obfuscator
# or: npm install --save-dev tailwindcss-obfuscator
# or: yarn add --dev tailwindcss-obfuscator

You also need tailwindcss (v3 or v4) installed in the project.

Quick start — Vite

// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import tailwindCssObfuscator from "tailwindcss-obfuscator/vite";

export default defineConfig({
  plugins: [tailwindcss(), tailwindCssObfuscator()],
});

That's it. Run vite build and your bundle is obfuscated. vite dev is left untouched so the dev experience stays normal.

For Webpack / Rollup / esbuild / Next.js / Nuxt / SvelteKit / Astro / Solid / Qwik / React Router 7 / TanStack Router setups, see the full documentation.

Plugin entry points

| Bundler / framework | Import path | | ------------------- | ---------------------------------- | | Vite | tailwindcss-obfuscator/vite | | Webpack | tailwindcss-obfuscator/webpack | | Rollup | tailwindcss-obfuscator/rollup | | esbuild | tailwindcss-obfuscator/esbuild | | Nuxt module | tailwindcss-obfuscator/nuxt | | CLI binary | tw-obfuscator (after install) | | Internal pipeline | tailwindcss-obfuscator/internals |

Compatibility

The "Versions" column lists the design-intent range — the plugin core is bundler-agnostic and most modern versions of each tool work. The "Tested in CI" column lists the exact version exercised by an apps/test-* app on every release. If you need a guarantee for a specific version, open an issue and we'll add a test app.

| Dependency | Versions | Tested in CI | | ------------------ | ------------- | -------------------------------- | | Tailwind CSS | v3.x · v4.x | v3.4 + v4.1 | | Vite | v4 → v8 | v8.x | | Webpack | v5 | v5.106 (standalone) + v5 in Next | | Rollup | v3 → v4 | v4.60 | | esbuild | ≥ 0.17 | ≥ 0.28 | | Next.js | v13 → v16 | v16.2 (App Router + Turbopack) | | Nuxt | v3 · v4 | v4.4 | | SvelteKit | v2 | v2.58 (Svelte 5.55, runes) | | Svelte | v4 · v5 | v5.55 (runes) | | Astro | v4 → v6 | v6.1 | | Vue | v3.5+ | v3.5.14 | | Solid | v1.9+ | v1.9.12 | | Qwik | v1.x | v1.19 | | React Router | v7 (ex-Remix) | v7.14 | | TanStack Start | v1.168+ | v1.168 | | Node.js | ≥ 18 | 20 (CI) + 22 (CI) |

Full live matrix with the test app file paths : docs/reference/compatibility.

FAQ

A build-time tool that rewrites verbose Tailwind classes (bg-blue-500, flex, items-center) into short opaque identifiers (tw-a, tw-b, tw-c) inside the shipped HTML / CSS / JS bundle. Source code stays readable; only production output is changed. Net effect: 30–60% smaller CSS and a much harder-to-reverse-engineer design system, with zero runtime cost.

tailwindcss-mangle was built primarily to mangle classes for tree-shaking. tailwindcss-obfuscator is built around obfuscation as the primary goal: a unified unplugin core (Vite/Webpack/Rollup/esbuild/Rspack/Farm), AST extraction with full cn() / clsx() / cva() / tv() support, native Svelte class: directives, source maps, a standalone CLI (tw-obfuscator) and explicit Tailwind v4 support.

The other contenders in the same space — Obfustail (UI Layouts), cssnano, and csso — are compared cell-by-cell in docs/research/comparison.

Yes — full v4 support, including @import "tailwindcss", @theme, container queries, @starting-style, the *: / **: wildcards, and the new bg-(--my-var) shorthand. v3 (config file, JIT, safelist) is also fully supported.

Yes — every major meta-framework has a dedicated test app and a documented setup recipe. Use the matching plugin entry from the table above, or read the framework guides.

No — obfuscation only runs on production builds (vite build / next build / webpack --mode=production). Dev servers stay untouched.

Yes — every build emits .tw-obfuscation/class-mapping.json, a deterministic mapping you can keep around to translate any tw-xxx back to its original class.

Yes — cn(), clsx(), classnames(), twMerge(), cva() and tv() are recognised natively, including string literals nested inside variants, compoundVariants and defaultVariants.

MIT — free for personal, commercial, and closed-source use.

Keywords

tailwindcss obfuscator · tailwind css obfuscator · tailwind mangle · tailwindcss-mangle alternative · obfuscate tailwind classes · tailwind class shortener · shrink tailwind css bundle · tailwind v4 obfuscator · tailwind v3 obfuscator · tailwind vite plugin obfuscate · tailwind webpack plugin obfuscate · tailwind rollup plugin obfuscate · tailwind esbuild plugin obfuscate · tailwind rspack plugin · tailwind farm plugin · next.js tailwind obfuscator · nuxt tailwindcss obfuscator · sveltekit tailwind obfuscator · astro tailwind obfuscator · solid.js tailwind obfuscator · qwik tailwind obfuscator · react router tailwind obfuscator · tanstack router tailwind obfuscator · remix tailwind obfuscator · shadcn ui obfuscate · cva obfuscate · protect tailwind design system · hide tailwind classes · tailwind reverse engineering protection

Author

Built and maintained by José DA COSTA.

• 🌐 Website — https://www.josedacosta.info
• 🐙 GitHub — @josedacosta
• ✉️ Email — [email protected]

Sponsor on GitHub Sponsors if this saves you bandwidth or protects your design system.

License

MIT © José DA COSTA.