Vite

Installation

pnpm

pnpm add -D tailwindcss-obfuscator

npm

npm install -D tailwindcss-obfuscator

yarn

yarn add -D tailwindcss-obfuscator

Configuration

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react"; // or vue, svelte, etc.
import TailwindObfuscator from "tailwindcss-obfuscator/vite";

export default defineConfig({
  plugins: [
    react(),
    TailwindObfuscator({
      prefix: "tw-",
      verbose: true,
    }),
  ],
});

Options

TailwindObfuscator({
  // Prefix for obfuscated class names
  prefix: "tw-",

  // Enable verbose logging
  verbose: true,

  // Exclude specific classes
  exclude: ["dark", "light", /^data-/],

  // Mapping file output
  mapping: {
    enabled: true,
    file: ".tw-obfuscation/class-mapping.json",
    pretty: true,
  },

  // Cache for incremental builds
  cache: {
    enabled: true,
    directory: ".tw-obfuscation/cache",
    strategy: "merge",
  },
});

Supported frameworks

The Vite plugin works with every Vite-based framework:

Framework	Status
React	Stable
Vue	Stable
Svelte	Stable
Solid	Stable
Qwik	Stable
Preact	Stable

Development mode

By default the obfuscator is disabled in development (vite dev) so the dev experience stays normal. It activates automatically during vite build.

To force obfuscation in dev (not recommended for normal development):

TailwindObfuscator({
  // Force obfuscation even in dev
  refresh: true,
});

Full example

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import TailwindObfuscator from "tailwindcss-obfuscator/vite";

export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    TailwindObfuscator({
      prefix: "tw-",
      verbose: mode === "production",
      exclude: [
        "dark",
        "light",
        /^prose/, // Exclude Tailwind Typography
      ],
      mapping: {
        enabled: true,
        file: ".tw-obfuscation/class-mapping.json",
        pretty: mode !== "production",
      },
    }),
  ],
}));