cn

Patterns merge their classes with the className you pass using cn from the cn package. Gaudi UI doesn't import it directly. It goes through lib/cn.ts, a small wrapper that teaches it the type scale.

What the wrapper changes

The package resolves conflicts by class group. It knows Tailwind's built-in font sizes, but not the ones in typography.css, so it reads text-body as a text color. Next to a real color, one of them gets dropped:

import { cn } from 'cn';

cn('text-body', 'text-muted-foreground');
// → 'text-muted-foreground'

The wrapper registers the type scale as font sizes, so both classes survive, and a type style passed from outside still replaces the default one:

import { cn } from '@/lib/cn';

cn('text-body', 'text-muted-foreground');
// → 'text-body text-muted-foreground'

cn('text-body', 'text-caption-1');
// → 'text-caption-1'

Every pattern imports cn from @/lib/cn, never from the package.

Installation

gaudi-ui init writes lib/cn.ts and installs the cn package. A pattern that uses cn requires it, so adding the pattern brings it too.

import { createCn } from 'cn/config';

/** The type scale in `styles/typography.css`: `text-body`, `text-caption-1`, … */
const typeScale = [
  'large-title',
  'display-1',
  'display-2',
  'display-3',
  'display-4',
  'title-1',
  'title-2',
  'title-3',
  'headline',
  'body',
  'body-2',
  'caption-1',
  'caption-2',
];

export const cn = createCn({
  extend: { classGroups: { 'font-size': [{ text: typeScale }] } },
});

Adding a type style

If you add a style to typography.css, add its name to typeScale as well. Otherwise cn treats it as a color again.