Appearance

Getting Started ​

Prerequisites ​

  • Node.js 18.x or higher
  • A project using Tailwind CSS (v3 or v4)
  • A supported build tool (Vite, Webpack, etc.)

Installation ​

bash
pnpm add -D tailwindcss-obfuscator
bash
npm install -D tailwindcss-obfuscator
bash
yarn add -D tailwindcss-obfuscator

Basic Setup ​

Vite ​

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

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

Next.js ​

ts
// next.config.ts
import type { NextConfig } from "next";
import TailwindObfuscator from "tailwindcss-obfuscator/webpack";

const config: NextConfig = {
  webpack: (config, { dev }) => {
    if (!dev) {
      config.plugins = config.plugins || [];
      config.plugins.push(
        TailwindObfuscator({
          prefix: "tw-",
          verbose: true,
        })
      );
    }
    return config;
  },
};

export default config;

Nuxt ​

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["tailwindcss-obfuscator/nuxt"],

  tailwindcssObfuscator: {
    prefix: "tw-",
    verbose: true,
  },
});

Verify Installation ​

After setting up, run your production build:

bash
pnpm build

You should see output like:

[tw-obfuscator] Initializing Tailwind CSS obfuscator...
[tw-obfuscator] Extracted 1234 classes from 50 files
[tw-obfuscator] Detected Tailwind CSS v4
[tw-obfuscator] Found 456 classes to obfuscate
[tw-obfuscator] Obfuscation complete!

Class Mapping ​

A mapping file is generated at .tw-obfuscation/class-mapping.json:

json
{
  "version": "1.0.0",
  "generatedAt": "2024-01-15T10:30:00Z",
  "tailwindVersion": "4",
  "totalClasses": 1234,
  "obfuscatedClasses": 456,
  "classes": {
    "bg-blue-500": {
      "original": "bg-blue-500",
      "obfuscated": "tw-a",
      "usedIn": ["src/components/Button.tsx"],
      "occurrences": 3
    }
  }
}

Next Steps ​