> ## Documentation Index
> Fetch the complete documentation index at: https://better-styled.com/llms.txt
> Use this file to discover all available pages before exploring further.

# API reference for cn()

> Merges class names with Tailwind conflict resolution. Combines clsx and tailwind-merge.

## Signature

```tsx theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
function cn(...inputs: ClassValue[]): string | undefined
```

## Parameters

<ParamField path="inputs" type="ClassValue[]">
  Any number of class values: strings, arrays, objects, undefined, null, or false.
</ParamField>

## Returns

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

## Example

```tsx theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
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](https://github.com/lukeed/clsx) for conditional classes with [tailwind-merge](https://github.com/dcastil/tailwind-merge) for conflict resolution.

```tsx theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
// 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:

```tsx theme={"theme":{"light":"min-light","dark":"synthwave-84"}}
function CustomButton({ className, ...props }) {
  return (
    <button
      className={cn("base-button px-4 py-2", className)}
      {...props}
    />
  );
}
```