Question: clsx use?

[Brian-McBride]

Hi, since you don't have discussions open here I'm asking in an issue.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

What is the value of clsx here? I've been using twMerge since I started adopting Tailwind in my projects. I've been finding that it works just like clsx but maybe I'm missing the value of composing both?

I mean, this works just fine:

<div className={ twMerge( 'flex gap-2', shouldHide && 'hidden' ) } > ... </div>

[schardev]

You can join/merge classes with using just twJoin and/or twMerge, you probably don't need clsx. But if you want an object syntax for defining your conditional classes then clsx supports that, like:

// ...
<div className={clsx({ "text-black": !isDark, "hidden": show })}></div>
// ...

This is probably the only reason why someone wants to use clsx over something like twJoin and twMerge. Also, clsx is dependency free, whereas twMerge depends on tailwincss.

[kachkaev]

Object support comes with its caveat: https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/267

I removed clsx from within cn recently, it was quite quick. Replacing { 'class-name': condition } with condition && 'class-name' was rather painless. I can recommend doing that too! More details: https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/267#issuecomment-1907798102

Similar issue / question: https://github.com/shadcn-ui/ui/issues/1282

[hibatariq]

what is type ClassValue?

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.