Class utilities

tailwindcss-obfuscator automatically detects classes inside the popular class-utility helpers.

Supported helpers

Function	Package	Support
cn()	shadcn/ui	Full
clsx()	clsx	Full
classnames()	classnames	Full
classNames()	classnames	Full
twMerge()	tailwind-merge	Full
cva()	class-variance-authority	Full
tv()	tailwind-variants	Full

Examples

cn() — shadcn/ui

import { cn } from "@/lib/utils";

// All these classes will be obfuscated
<div className={cn("flex items-center", isActive && "bg-blue-500", disabled ? "opacity-50" : "opacity-100")}>;

clsx()

import clsx from "clsx";

<button
  className={clsx("px-4 py-2 rounded", {
    "bg-blue-500 text-white": variant === "primary",
    "bg-gray-200 text-gray-800": variant === "secondary",
  })}
>;

cva() — class-variance-authority

import { cva } from "class-variance-authority";

const buttonVariants = cva(
  // Base classes — obfuscated
  "inline-flex items-center justify-center rounded-md font-medium",
  {
    variants: {
      variant: {
        // All these classes will be obfuscated
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
      },
    },
  }
);

twMerge()

import { twMerge } from "tailwind-merge";

// Classes are merged, then obfuscated
<div
  className={twMerge(
    "px-4 py-2 bg-blue-500",
    "px-6", // overrides px-4
  )}
>;

tv() — tailwind-variants

import { tv } from "tailwind-variants";

const button = tv({
  base: "font-medium rounded-full active:opacity-80",
  variants: {
    color: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-purple-500 text-white",
    },
    size: {
      sm: "text-sm px-4 py-1",
      md: "text-base px-6 py-2",
    },
  },
});

Template literals

Template literals are supported too:

// Supported
<div className={`flex ${isActive ? 'bg-blue-500' : 'bg-gray-500'}`}>

// Supported inside cn()
<div className={cn(`
  flex
  items-center
  ${size === 'lg' ? 'p-6' : 'p-4'}
`)}>

Framework-specific patterns

Vue — :class binding

<!-- Object syntax -->
<div :class="{ 'bg-blue-500': isActive, 'text-white': true }">

<!-- Array syntax -->
<div :class="['flex', isActive ? 'bg-blue-500' : 'bg-gray-500']">

<!-- Mixed syntax -->
<div :class="[baseClass, { 'bg-blue-500': isActive }]">

<!-- v-bind:class -->
<div v-bind:class="{ 'hover:bg-blue-600': true }">

Svelte — class: directive

<!-- class: directive -->
<div class:bg-red-500={hasError} class:flex>Content</div>

<!-- class:list directive -->
<div class:list={["flex", "items-center", { "bg-red-500": isActive }]}>

Astro — class:list directive

---
const isActive = true;
---
<div class:list={["flex", "items-center", { "bg-red-500": isActive }]}>
  Content
</div>

Qwik — class$ binding

// Qwik reactive class binding
<div class$={"flex items-center bg-blue-500"}>Content</div>

Limitations

Dynamic classes are not supported

// ❌ DOES NOT WORK — class assembled at runtime
const color = 'blue'
<div className={`bg-${color}-500`}>

// ✅ WORKS — complete static class strings
<div className={color === 'blue' ? 'bg-blue-500' : 'bg-red-500'}>

All variants must be static

// ❌ DOES NOT WORK
const sizes = ["sm", "md", "lg"];
sizes.map((s) => `text-${s}`);

// ✅ WORKS
const sizeClasses = {
  sm: "text-sm",
  md: "text-base",
  lg: "text-lg",
};