Make twJoin a drop in replacement for clsx in TW Catalyst

[tordans]

Catalyst released as a dev preview https://tailwindcss.com/blog/introducing-catalyst.
They are using clsx.
I tried renaming all the usage to twJoin but that fails with some TS errors.
It would be awesome, if there where a drop in replacement for clsx using twJoin.
Maybe something like "import { twJoinClsxWrapper as clsx } from 'tailwind-merge'?

[dcastil]

Hey @tordans! 👋

I don't have access to Catalyst, so I don't know what type errors you mean exactly. In case you mean the object syntax that clsx supports but twJoin does not, I wrote an explanation here about why tailwind-merge doesn't support the object syntax.

I think there wouldn't be a lot of benefit in adding a twJoinClsxWrapper to tailwind-merge, since that would just be a copy of clsx (both functions are very similar). Then you can just keep using clsx itself instead.

Generally it's not an issue at all to use clsx with tailwind-merge together. twJoin is used internally within tailwind-merge, so I added it as an export so you don't need to use another library if that's good enough for you. But if a codebase is using clsx already, you don't need to refactor it to twJoin. I'm not aware of any major benefit that would bring.

[tordans]

@dcastil I think the error come from https://github.com/tailwindlabs/headlessui/blob/f6a99cad2624daffbd4d0eeafd9b6bf64fbcb8fc/packages/%40headlessui-react/src/types.ts#L38-L45

FYI: Catalyst uses the latest, unreleased version of headlessui ATM.

Argument of type 'string | ((bag: ItemsRenderPropArg) => string) | undefined' is not assignable to parameter of type 'ClassNameValue'.
  Type '(bag: ItemsRenderPropArg) => string' is not assignable to type 'ClassNameValue'.ts(2345)

It sounds like this might be something that you could add to twJoin since the result is just a string but the string is the result of a function…

Generally it's not an issue at all to use clsx with tailwind-merge together.

From a pure technical point of view I agree. But I would really like to avoid the team discussion on when to use what and why to use the one over the other. Those discussions are hard and unproductive. Also, it would be nice to not have both packages as dependency.

[dcastil]

Can you show the code that is causing this error? twJoin() returns a string type and you should be able to use it like this:

<MyHeadlessUIComponent className={twJoin(/* join some stuff */)} />
// or
<MyHeadlessUIComponent className={bag => twJoin(/* join some stuff */)} />