utils (cn)

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

npx candlelight-ds add utils

Use when

Composing conditional Tailwind classes in any registry component.

Don't use when

Anywhere else — it is plumbing, not a pattern.

States

Traps

• 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

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

Raw twin: /components/utils.md·Registry item: /r/utils.json