tailwind-scramble

Scramble your Tailwind CSS class names in production builds. Replaces readable class names like flex items-center with random short identifiers like akzmqt xbfplo, making your markup harder to reverse-engineer.

Works with Next.js (Webpack and Turbopack), and supports class utility functions like cn(), clsx(), cva(), and others.

How it works

The package has two plugins that work together:

1. Webpack Plugin: A bundler loader that parses your JSX/TSX, finds class name strings (in className attributes and utility function calls), and replaces each class with a unique random identifier. It writes the mapping to a JSON file.

2. PostCSS Plugin: Reads the class mapping and rewrites the corresponding CSS selectors to match the scrambled names.

Both plugins share the mapping file, so the scrambled class names in your HTML and CSS always stay in sync.

Supported class utilities

The Webpack plugin detects and rewrites strings inside these functions:

• cn()
• clsx()
• cx()
• cva()
• classnames()
• twMerge()
• twJoin()

This also includes all shadcn configuration and popular class mapping functions. Contributions welcome to add support for more!

Installation

npm install tailwind-scramble

Setup (Next.js)

It is recommended to only use this plugin during production builds to make development easier.

Webpack

// next.config.ts
import type { NextConfig } from "next";

const isProd = process.env.NODE_ENV === "production";

const nextConfig: NextConfig = {
  webpack(config) {
    if (isProd) {
      config.module?.rules?.unshift({
        test: /\.(tsx|ts|jsx|js|mjs)$/,
        exclude: /node_modules/,
        enforce: "pre",
        use: [
          {
            loader: require.resolve("tailwind-scramble/webpack"),
            options: {},
          },
        ],
      });
    }

    return config;
  },
};

export default nextConfig;

PostCSS

// postcss.config.mjs
const isProd = process.env.NODE_ENV === "production";

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
    ...(isProd && { "tailwind-scramble/postcss": {} }),
  },
};

export default config;

License

MIT