What is tailwindcss-obfuscator?

tailwindcss-obfuscator is a build-time tool that transforms your Tailwind CSS class names into short, cryptic identifiers to protect your CSS intellectual property.

The Problem

When you build a website with Tailwind CSS, your class names are fully readable in the browser's DevTools:

<div
  class="flex items-center justify-between rounded-lg bg-white p-4 shadow-md transition-shadow hover:shadow-lg"
>
  <h1 class="text-xl font-bold text-gray-900">Dashboard</h1>
  <button class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">Save</button>
</div>

This reveals:

• Your design system structure
• Component styling patterns
• Responsive breakpoints used
• State management approach (hover, focus, etc.)

The Solution

tailwindcss-obfuscator transforms these classes at build time:

<div class="tw-a tw-b tw-c tw-d tw-e tw-f tw-g tw-h tw-i">
  <h1 class="tw-j tw-k tw-l">Dashboard</h1>
  <button class="tw-m tw-n tw-o tw-p tw-q tw-r">Save</button>
</div>

The CSS is also transformed:

/* Before */
.bg-blue-500 {
  background-color: rgb(59 130 246);
}
.hover\:bg-blue-600:hover {
  background-color: rgb(37 99 235);
}

/* After */
.tw-o {
  background-color: rgb(59 130 246);
}
.tw-r:hover {
  background-color: rgb(37 99 235);
}

Key Features

Zero Runtime Cost

All obfuscation happens during the build process. There's no JavaScript overhead or performance penalty in production.

Framework Agnostic

Works with any framework through unplugin:

• Vite (React, Vue, Svelte, Solid, Qwik)
• Webpack (Next.js)
• Rollup
• esbuild

Smart Class Detection

Automatically detects Tailwind classes in:

• className and class attributes
• cn(), clsx(), classnames() utilities
• cva() from class-variance-authority
• twMerge() from tailwind-merge
• Template literals and conditional expressions

Tailwind v3 & v4 Support

Works with both:

• Tailwind v3: Config-based with tailwind.config.js
• Tailwind v4: CSS-first with @import "tailwindcss"

Persistent Mapping

Class mappings are saved and reused across builds:

• Consistent obfuscated names between builds
• Merge strategy for incremental updates
• JSON output for debugging

What It Doesn't Do

• Runtime obfuscation: Classes must be static strings, not dynamically constructed
• Dynamic class names: bg-${color}-500 won't work (use conditional classes instead)
• Third-party CSS: Only Tailwind utility classes are obfuscated

Comparison

Feature	tailwindcss-obfuscator	tailwindcss-mangle
Tailwind v4	Yes	No
Patching required	No	Yes
Build tool support	All (unplugin)	Vite, Webpack
Active development	Yes	Limited