# utils (cn)

The class combiner every component leans on: clsx + tailwind-merge with proper precedence. Ships automatically as a registry dependency of every component.

Install: `npx candlelight-ds add utils`

Category: hook · Grammar: —

## Use when

Composing conditional Tailwind classes in any registry component.

## Don't use when

Anywhere else — it is plumbing, not a pattern.

## States


## Keyboard

- (none — pointer/semantic only)

## Traps (shipped once — do not re-learn)

- tailwind-merge cannot tell a renamed font-size (text-marquee) from a text color (text-ink) — both wear text-. The shipped cn registers the named type steps via extendTailwindMerge; replace it with a bare twMerge and cn('text-marquee', 'text-ink') silently drops the size.

## Acceptance tests

- Later classes win conflicts (twMerge precedence), so a consumer's className prop can override a component default.

## Files

- lib/utils.ts

npm dependencies: clsx, tailwind-merge

Rendered twin: https://candlelight-docs.vercel.app/components/utils · Full spec: https://candlelight-docs.vercel.app/spec.md