Do I need both clsx and twMerge?

[markomitranic]

Hey gang

Something has been bugging me for a while now. Whenever we talk about TwMerge we talk about it's performance compared to clsx.

I've most commonly seen it used in combination with clsx, as originally proposed by shadcn:

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

But what bothers me is that I can't find any reference from anyone who actually knows what they are talking about - do I need both? Do we get some performance benefit by having clsx do the first concat? Why would someone propose this if not, are there any other reasons?

🤷 Any information is welcome

[alianza]

Here's a really good video about it: https://www.youtube.com/watch?v=re2JFITR7TI

Haven't used it myself yet though. Good luck!

[markomitranic]

Oh, so clsx is there only to enable the crappy object syntax?

Wow didn’t expect that at all. I always thought it was inside to enable some performance improvement with merging classes more efficiently before passing them to twMerge.

So the answer really is - just use twMerge.

[alianza]

Yes I think you're right. What I got from the video is that this is useful for conditional mergable classnames.

[dcastil]

Yes, you are right. I believe some people wanted to use the object syntax which tailwind-merge doesn't support and then everyone else copied that piece of code. 😅

If you don't use the object syntax, you don't need the clsx part. twMerge supports everything that clsx does except objects. I also believe you shouldn't use the object syntax when using Tailwind CSS classes.