Docs are incorrect in showing how to call CN function

[saturnonearth]

Describe the bug Calling...

cn('bg-red-500', 'text-white');

will not work, and results in a return of a function, not the result, as the docs show.

In order to work, you must write it like this:

cn('bg-red-500', 'text-white')({ twMerge: true });

To Reproduce Steps to reproduce the behavior:

• Install 3.1
• Run console.log(cn('bg-red-500', 'text-white'))
• See results in console

Expected behavior It should behave as the docs describe.

[Nickersoft]

Just ran across this myself – I almost wonder if this is intentional, because IMO it's not a great API to pass these settings. Also, based on the docs it seems that cn is supposed to automatically use/detect twMerge, whereas cnBase just merges without it 🤔

[saturnonearth]

Just ran across this myself – I almost wonder if this is intentional, because IMO it's not a great API to pass these settings. Also, based on the docs it seems that cn is supposed to automatically use/detect twMerge, whereas cnBase just merges without it 🤔

Yea it seems that cn should be able to be called alone without the {twMerge} property passed.

[Jdruwe]

Any update on this?

[fendyk]

For anyone who is wondering how to do this, just wrap it

import { type ClassValue, cn as cnTV } from "tailwind-variants";

export function cn(...args: ClassValue[]) {
	return cnTV(args)({ twMerge: true });
}

so now you can do

<div className={cn("bg-red-500")} />

[Jdruwe]

For anyone who is wondering how to do this, just wrap it

import { type ClassValue, cn as cnTV } from "tailwind-variants";

export function cn(...args: ClassValue[]) { return cnTV(args)({ twMerge: true }); } so now you can do

Yea I ended up doing something similar :)

[jrgarciadev]

Fixed 🙌🏼, thanks for reporting it, will be available on v3.1.0