Replace clsx with Tailwind-Merge

[onemen]

@kentcdodds

I've watched this video, and this package is looking good.

what do you think ?

here a Youtube video from @simonswiss about Tailwind-Merge
https://github.com/dcastil/tailwind-merge

[kentcdodds]

I've been thinking about that. I'm a little concerned that it's 21kb of JS, but I do think that it's worth its weight.

[onemen]

At the moment I don't think we that epic-stack have any class name duplication, so we don't need the benefit of merge

[kentcdodds]

True, but we could put it in place for our form components so people could start passing class names to those without having to worry about this problem.

[onemen]

maybe we can use both tailwind-merge and clsx

clsx in getButtonClassName and tailwind-merge in the component:

			className={twMerge(
				getButtonClassName({ size, variant }),
				'flex justify-center gap-4',
				props.className,
			)}

[kentcdodds]

I think tailwind-merge has a join utility that functions just like clsx so I think we'd drop clsx if we did this.

[rajeshg]

twJoin - https://github.com/dcastil/tailwind-merge/blob/v1.13.0/docs/when-and-how-to-use-it.md

className={twMerge(twJoin(
    getButtonClassName({ size, variant }), 
    'flex justify-center gap-4', 
    props.className
))}		

May be we can add a utils function like this (reference: https://github.com/shadcn/ui/blob/main/apps/www/lib/utils.ts)

export function mergeJoin(...inputs: ClassValue[]) {
  return twMerge(twJoin(inputs))
}

[kentcdodds]

100%

Definitely willing to accept a PR for this.

[kentcdodds]

Though, honestly I'm pretty sure we could just use twMerge and not bother with twJoin here. I may be missing something though.

[courdek]

The key difference between twMerge/twJoin and clsx is that the former does not support the object syntax. Otherwise twMerge could be used by itself, although it is slower than both twJoin and clsx because of the conflict resolution.