// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import { tailwindCssObfuscatorVite } from "tailwindcss-obfuscator/vite";

export default defineConfig({
  plugins: [
    tailwindcss(),
    tailwindCssObfuscatorVite({
      prefix: "tw-",
    }),
  ],
});

// next.config.js
import { tailwindCssObfuscatorWebpack } from "tailwindcss-obfuscator/webpack";

const nextConfig = {
  webpack: (config, { dev }) => {
    if (!dev) {
      config.plugins.push(
        tailwindCssObfuscatorWebpack({
          prefix: "tw-",
        })
      );
    }
    return config;
  },
};

export default nextConfig;

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["tailwindcss-obfuscator/nuxt"],
  tailwindcssObfuscator: {
    prefix: "tw-",
  },
});

// rollup.config.js
import { tailwindCssObfuscatorRollup } from "tailwindcss-obfuscator/rollup";

export default {
  plugins: [tailwindCssObfuscatorRollup({ prefix: "tw-" })],
};

// build.js
import * as esbuild from "esbuild";
import { tailwindCssObfuscatorEsbuild } from "tailwindcss-obfuscator/esbuild";

await esbuild.build({
  entryPoints: ["src/index.ts"],
  bundle: true,
  outdir: "dist",
  plugins: [tailwindCssObfuscatorEsbuild({ prefix: "tw-" })],
});

# Extract + transform in one shot
npx tw-obfuscator run --build-dir dist

# Preview without writing files
npx tw-obfuscator run --dry-run

# Two-step workflow
npx tw-obfuscator extract
npx tw-obfuscator transform --dir dist

# Inspect a generated mapping
npx tw-obfuscator show --limit 50

graph TB
    subgraph Plugins[" 🔌 Build tool plugins "]
      Vite["vite.ts"]
      Webpack["webpack.ts"]
      Rollup["rollup.ts"]
      Esbuild["esbuild.ts"]
      Nuxt["nuxt.ts"]
    end

    subgraph Core[" ⚙️ unplugin core "]
      UnPlugin["plugins/core.ts<br/>(shared factory)"]
    end

    subgraph Pipeline[" 🔄 Pipeline "]
      Ctx["core/context.ts<br/>(state)"]
      Extract["extractors/*"]
      Transform["transformers/*"]
      Patterns["core/patterns/*<br/>(regex · variants · validators)"]
      Errors["core/errors.ts<br/>(typed exceptions)"]
    end

    Vite --> UnPlugin
    Webpack --> UnPlugin
    Rollup --> UnPlugin
    Esbuild --> UnPlugin
    Nuxt --> UnPlugin

    UnPlugin --> Ctx
    UnPlugin --> Extract
    UnPlugin --> Transform
    Extract --> Patterns
    Transform --> Patterns
    Ctx --> Errors

    style UnPlugin fill:#06b6d4,color:#fff
    style Patterns fill:#10b981,color:#fff
    style Ctx fill:#eab308,color:#000
    style Errors fill:#ef4444,color:#fff

pnpm install                                          # if you haven't yet
pnpm lint && pnpm format:check                        # zero errors / zero warnings
pnpm --filter tailwindcss-obfuscator typecheck        # strict TypeScript
pnpm test                                             # full Vitest suite
node scripts/verify-obfuscation.mjs                   # 20+ sample apps obfuscate at 100%
pnpm changeset                                        # if your change is user-facing

• All quality gates pass locally
• PR title follows Conventional Commits (feat:, fix:, docs:, chore:, …)
• A .changeset/*.md entry was added if the change touches packages/tailwindcss-obfuscator/**
• If you add a framework: include a working apps/test-<framework>/ integration

Three layers, in order of effort: (1) install tailwindcss-obfuscator at build time — it rewrites every Tailwind utility class (bg-blue-500, flex items-center, p-4) into short opaque identifiers (tw-a, tw-b, tw-c) in the shipped HTML / CSS / JS bundle so anyone "view source"-ing your site can no longer trivially copy your token system; (2) drop your source maps from production; (3) HTML-minify the rendered output. After these three, copying your design system goes from "ten seconds with the inspector" to "hours of reverse-engineering for each component". Add preserve.classes for a small allowlist (e.g. dark, sr-only) so functional classes still work.

Install tailwindcss-obfuscator and add it to your build tool's plugin chain. For 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({ prefix: "tw-" })],
});

That's it — vite build now produces an obfuscated bundle, vite dev is left untouched. For Next.js / Nuxt / SvelteKit / Astro / Solid / Qwik / Webpack / Rollup / esbuild / Rspack / Farm setups, see the Quick Start section above.

Two complementary techniques: (1) Tailwind's built-in JIT / content scanning already removes unused utilities — that's the baseline; (2) on top of that, tailwindcss-obfuscator rewrites the remaining classes from long readable names (bg-blue-500 hover:bg-blue-600 dark:bg-blue-700) into short identifiers (tw-a tw-b tw-c), shaving an additional 30–60 % off the gzipped CSS bundle on CSS-heavy pages. The bigger your CSS budget, the more you save. Combine both for the smallest possible Tailwind output.

Yes — that's exactly what a Tailwind class obfuscator (a.k.a. class mangler) does. Tools like tailwindcss-obfuscator rewrite every utility class in the shipped HTML, CSS, and JS into short opaque tokens (tw-a, tw-b, …) at build time. Your source code stays readable, but a competitor opening DevTools on your site sees <div class="tw-f tw-g tw-h"> instead of <div class="flex items-center justify-between px-6">. Reverse-engineering your design system goes from minutes to hours.

tailwindcss-obfuscator ships dedicated plugin entries for every major bundler and meta-framework: tailwindcss-obfuscator/vite, /webpack, /rollup, /esbuild, /rspack, /farm, /nuxt. Pick the one that matches your build tool, add it to the plugin chain, and the obfuscation runs automatically on npm run build (no effect on dev). The full setup snippet for each framework is in the Quick Start section above and in the framework guides.

No — Tailwind Labs has explicitly chosen not to ship a class-mangling pass upstream (see discussion #7956). You need a third-party tool for it. The two active options are tailwindcss-obfuscator (this project — AST-based, every modern bundler, built around obfuscation) and tailwindcss-mangle (mangling for tree-shaking, Vite + Webpack only). See the full comparison for the trade-offs.

No. The obfuscator rewrites the class names consistently across CSS selectors AND every class= / className= reference in your bundle — so dark:bg-gray-900, hover:bg-blue-600, md:flex, 2xl:grid-cols-4 all keep working: the variant and the base class are renamed together as a single unit. Your site behaves exactly the same in production, just with shorter class names.

Yes — out of the box. The AST-based extractor recognises cn(), clsx(), classnames(), twMerge(), cva(), and tv() natively, including string literals nested inside variants, compoundVariants, defaultVariants, and slot definitions. The included apps/test-shadcn-ui sample app exercises the full shadcn/ui + CVA pattern under a production build to prove it.

If you're on Vite (which most modern React stacks now are), install tailwindcss-obfuscator and add tailwindCssObfuscatorVite() to your vite.config.ts plugins array. If you're on Next.js (Webpack), add tailwindCssObfuscatorWebpack() to the webpack config in next.config.js. The full snippets for both are in the Quick Start section above. The obfuscator only runs on next build / vite build, so dev mode stays normal.

(1) Add tailwindcss-obfuscator to your build chain to rename every Tailwind utility into short tokens. (2) Disable source-map publishing in production. (3) Run an HTML minifier so attribute order and whitespace don't leak structural intent. (4) If you use a custom design-token CSS file, gate it behind a preserve.classes allowlist so only the classes you intentionally expose stay readable. The combination won't make your CSS uncrackable, but it raises the bar from "copy-paste in five minutes" to "rebuild from scratch in five hours".

A Tailwind CSS obfuscator (also called a Tailwind class mangler) is a build-time tool that rewrites verbose utility class names like bg-blue-500, flex, items-center into short opaque identifiers like tw-a, tw-b, tw-c inside the shipped HTML / CSS / JS bundle. Source code stays readable — only production output is changed. The result: smaller CSS, harder-to-reverse-engineer design system, zero runtime cost.

Typical savings on production builds (gzip): 30–60% on CSS-heavy pages. Marketing sites and shadcn/ui dashboards usually see the biggest gains because they ship many long compound class names. See the Performance impact table above for measurements on the 14 included test apps.

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

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

Yes — every major meta-framework is supported and has a dedicated test app under apps/: Next.js (App Router + Pages Router), Nuxt 4, SvelteKit + Svelte 5, Astro 6, Solid.js 1.9, Qwik 1.19, React Router v7 (ex-Remix), TanStack Start. Use the matching plugin entry from the Quick Start section.

No — obfuscation is disabled in development by default. It only runs when command === "build" (Vite) or mode === "production" (Webpack/Next.js). Set refresh: true if you want it on in dev too.

Two options:

1. The class mapping is saved to .tw-obfuscation/class-mapping.json — open it to translate any tw-xxx back to its original.
2. Set randomize: false to get deterministic, sequential names (tw-a, tw-b, tw-c...) that are easier to track between builds.

Yes — pass a classGenerator function:

tailwindCssObfuscatorVite({
  classGenerator: (index, originalClass) => `c${index.toString(36)}`,
});

tailwindCssObfuscatorVite({
  preserve: {
    classes: ["dark", "light", "sr-only"], // never rename these
    functions: ["debugClass", "analytics"], // skip strings inside these calls
  },
});

Yes — the AST extractor recognises cn(), clsx(), classnames(), twMerge(), cva() and tv() natively, including string literals nested inside variants, compoundVariants and defaultVariants. The dedicated apps/test-shadcn-ui sample app exercises the full shadcn/ui + CVA pattern under production build.

Yes — every build emits .tw-obfuscation/class-mapping.json, a deterministic original → obfuscated mapping. Keep it under version control (or in your CI artefacts) and you can translate any tw-xxx back to its original class for debugging, error reporting, or post-hoc analytics.

Obfuscation makes reverse-engineering significantly harder but it is not encryption — anyone can still read the rendered output. Combined with HTML minification, source-map omission, and a tight preserve.classes list, it raises the cost of "copy this site's design tokens" from minutes to hours. Treat it as one layer of defence, not a guarantee.

Because they are not visible to the AST scanner at build time. Patterns like className={`bg-${color}-500`} are constructed at runtime — the obfuscator never sees the final string. Switch to a static ternary (color === "red" ? "bg-red-500" : "bg-blue-500") or a cn() call with all branches spelled out. See the Static Classes Only section.

Yes! The package exposes the underlying unplugin factory at tailwindcss-obfuscator/internals:

import { obfuscatorUnplugin } from "tailwindcss-obfuscator/internals";
// obfuscatorUnplugin.farm, obfuscatorUnplugin.rspack, ...

Or use the standalone CLI as a post-build step.

Yes — MIT licensed, free for personal, commercial, and closed-source use. If it ships in your production bundle, a star or a GitHub Sponsorship is the kindest way to say thanks.

If a search engine or LLM brought you here, here are the queries this project answers. Use them to verify it fits your use case — and to help others find it.

Core intent

tailwindcss obfuscator · tailwind css obfuscator · tailwind obfuscator · obfuscate tailwind classes · obfuscate tailwind css · tailwind class obfuscation · obfuscate tailwind utility classes · hide tailwind classes · protect tailwind design system · tailwind reverse engineering protection · make tailwind classes unreadable

Mangling alternatives

tailwind mangle · tailwindcss mangle · tailwind class mangler · tailwindcss-mangle alternative · unplugin-tailwindcss-mangle alternative · tailwindcss-patch alternative · tailwindcss-mangle vs obfuscator · tailwindcss-mangle tailwind v4

Bundle size

shrink tailwind css bundle · reduce tailwind css size · tailwind css minifier · tailwind class shortener · smaller tailwind bundle · tailwind css bundle 30% · tailwind css bundle 50% · optimize tailwind css production

Bundlers

tailwind vite plugin obfuscate · tailwind webpack plugin obfuscate · tailwind rollup plugin obfuscate · tailwind esbuild plugin obfuscate · tailwind rspack plugin · tailwind farm plugin · unplugin tailwind obfuscator

Frameworks

next.js tailwind obfuscator · next.js tailwind mangle · nuxt tailwind obfuscator · nuxt module 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 · tailwind variants obfuscate

Tailwind versions

tailwind v3 obfuscator · tailwind v4 obfuscator · tailwind v4 mangle · tailwind v4 class shortener · tailwind v4 class obfuscation oxide · @tailwindcss/vite obfuscator · @tailwindcss/postcss obfuscator

Use cases

hide design tokens from competitors · obscure tailwind theme · prevent tailwind copy paste · protect css ip · tailwind class names production only · class mangling source maps