tailwindcss-obfuscator
| Install | |
|---|---|
npm install tailwindcss-obfuscator |
|
| Latest Version: | 3.1.3 |
| License: | MIT |
| Last Updated: | Oct 19, 2026 |
| Links: | GitHub · npm |
tailwindcss-obfuscator
Obfuscate, mangle and shrink Tailwind CSS class names at build time.
Cuts your CSS bundle by 30–60% and protects your design system from copy-paste reverse-engineering.
Vite · Webpack · Rollup · esbuild · Rspack · Farm · Next.js · Nuxt · SvelteKit · Astro · Solid · Qwik · React Router 7 · TanStack Router.
Tailwind v3 & v4.
📖 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
What is a Tailwind CSS obfuscator (a.k.a. Tailwind class mangler)?
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.
How is it different from tailwindcss-mangle?
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.
Does it work with Tailwind CSS v4?
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.
Does it work with Next.js / Nuxt / SvelteKit / Astro / Solid / Qwik / Remix?
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.
Will it break my dev server?
No — obfuscation only runs on production builds (vite build / next build / webpack --mode=production). Dev servers stay untouched.
Is the transformation reversible?
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.
Does it support shadcn/ui, CVA, Tailwind Variants?
Yes — cn(), clsx(), classnames(), twMerge(), cva() and tv() are recognised natively, including string literals nested inside variants, compoundVariants and defaultVariants.
What's the licence?
MIT — free for personal, commercial, and closed-source use.
Keywords
Search terms this project answers
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 — contact@josedacosta.info
Sponsor on GitHub Sponsors if this saves you bandwidth or protects your design system.
License
MIT © José DA COSTA.
Related Packages
Unplugin to strip inter-node whitespace in Astro and Svelte templates (Vite/Roll...
A powerful unplugin for extracting class and className attributes from specified...
Dev plugin for Vite, webpack, rspack, Rsbuild, esbuild, Farm, Next.js and the An...
Version History
| Version | Released | License |
|---|---|---|
| 3.1.3 | MIT | |
| 3.1.2 | MIT | |
| 3.1.0 | MIT | |
| 3.0.0 | MIT | |
| 2.1.0 | MIT | |
| 2.0.3 | MIT | |
| 2.0.2 | MIT | |
| 2.0.0 | MIT |