Skip to main content

​
Signature

function cn(...inputs: ClassValue[]): string | undefined

​
Parameters

​
inputs
ClassValue[]
Any number of class values: strings, arrays, objects, undefined, null, or false.

​
Returns

A merged class string, or undefined if the result is empty.

​
Example

import { cn } from "better-styled";

cn("px-4 py-2", "px-8");
// → "py-2 px-8" (px-8 overrides px-4)

cn("text-red-500", condition && "text-blue-500");
// → "text-blue-500" if condition is true

cn("base", undefined, null, false, "active");
// → "base active"

cn();
// → undefined (not empty string)

​
How It Works

cn combines clsx for conditional classes with tailwind-merge for conflict resolution. 
// clsx handles conditionals
cn("base", isActive && "active", { "error": hasError });

// tailwind-merge handles conflicts
cn("p-4", "p-8");  // → "p-8" not "p-4 p-8"
cn("text-sm", "text-lg");  // → "text-lg"

​
When to Use

Most of the time, you won’t need cn() directly — styled() handles class merging for you. Use it when you need to merge classes outside of a styled component: 
function CustomButton({ className, ...props }) {
  return (
    <button
      className={cn("base-button px-4 py-2", className)}
      {...props}
    />
  );
}