twJoin as drop in replacement for clsx; missing object feature

[tordans]

I was hoping I could search and replace all clsx calls with twJoin to migrate my projects.

However, I am getting type errors for the object syntax that clsx supports:

twJoin({ 'hover:text-blue-500': menuHighlight !== 'posts' }, 'text-black')

… results in Error:

Argument of type '{ 'hover:text-blue-500': boolean; }' is not assignable to parameter of type 'ClassNameValue'.
Object literal may only specify known properties, and ''hover:text-blue-500'' does not exist in type 'ClassNameArray'.ts(2345)

Ideally …

• …twJoin and clsx would allow the same input
• …there where a codemod to help with this migration
• …there where a docs page that explains the differences of the packages

What is the current, recommended way to migrate? Globally replace the imports and names and then check the TS errors by hand?

[dcastil]

Hey @tordans! 👋

Thanks for your feedback! I'd love to build a codemod to help migrating from clsx but I'm maintaining this package alone next to my full time job, so this probably won't happen unfortunately, unless someone else wants to build it.

tailwind-merge doesn't support the object syntax. I wrote here about why it isn't supported: #137 (comment)

I'd suggest to keep using clsx instead of twJoin if you use the object syntax a lot. Otherwise you can migrate it by using the logical and operator.

clsx({ 'hover:text-blue-500': menuHighlight !== 'posts' }, 'text-black')
// becomes
twJoin(menuHighlight !== 'posts' && 'hover:text-blue-500', 'text-black')

You can also check out the example used here: https://github.com/dcastil/tailwind-merge/blob/v1.13.2/docs/when-and-how-to-use-it.md#joining-internal-classes

Related: #121, #137, #247