Appearance

TanStack Router ​

The Vite plugin works out of the box with TanStack Router (file-based or code-defined routes) and TanStack Start.

Install ​

bash
pnpm add -D tailwindcss-obfuscator
pnpm add @tanstack/react-router

Configure Vite ​

vite.config.ts:

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

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    tailwindCssObfuscator({
      prefix: "tw-",
      preserve: { classes: ["no-obfuscate"] },
      mapping: {
        enabled: true,
        file: ".tw-obfuscation/class-mapping.json",
        pretty: 2,
      },
    }),
  ],
});

If you also use @tanstack/router-plugin/vite for file-based routes generation, add it before react() and tailwindCssObfuscator(…). The order matters — the obfuscator runs enforce: "post" so it always sees the final transformed output.

TanStack Router's Link component supports an activeProps={ { className: "…" } } prop. Those class strings are picked up by the AST transformer like any other JSX className value:

tsx
<Link
  to="/about"
  className="rounded-lg bg-blue-600 px-4 py-2 text-white"
  activeProps={{ className: "ring-2 ring-blue-300" }}
>
  About
</Link>

Both className strings end up obfuscated.

See also ​