clsx VS tailwind-merge

Also serves as a faster & smaller drop-in replacement for the classnames module.

To make class-based Tailwind easy to use, we used the clsx library to help manipulate class names. However, using clsx and Tailwind together often doesn't work as intended.

clsx is a tiny utility for constructing className strings conditionally, I use it in conjunction with tailwind-merge which merges Tailwind CSS classes without style conflicts.

I am familiar with the library clsx although I have never used it personally. I don't often have the need for conditional classes and when I do it's usually an inline ternary expression in the style or className prop. Is that bad/good? Are there any other popular libraries other than clsx, or anti-patterns I should be aware of when doing conditional classes in React? Thanks fam

I use CLSX for all tailwind dynamic styles. Super simple, lightweight and now is almost part of every project I build haha

Clsx

https://github.com/lukeed/clsx “A tiny (228B) utility for constructing className strings conditionally.”

Then use something like clsx

For conditionally applying or removing classes, you should take a look at clsx.

clsx has better performance over the classnames package. That’s why it was created. Take a look at their benchmarks in the repo.

The package tailwind-merge helps us to combine the tailwind classes, safely. It will replace the defaults once an override is provided. For example, text-slate-600, will be removed as soon as text-green-500 has been provided.

So the library I use is tailwind-merge, which is a class that eliminates conflicts between classes when using Tailwind. So I created the following utility function.

clsx is a tiny utility for constructing className strings conditionally, I use it in conjunction with tailwind-merge which merges Tailwind CSS classes without style conflicts.

I searched for a solution, and I found tailwind-merge which is written in JavaScript. Basically it finds conflicted classes and resolve the conflict. For example:

I would suggest you to use CVA and tailwind-merge.

I used tailwind-merge and cva to build my UI component library Rewind-UI.

I use Tailwind + Next.js on most of my projects. Usually I add the following to the mix: - RadixUI+ tailwindcss-radix or HeadlessUI although I like Radix more - classnames - https://tailwindcss.com/blog/automatic-class-sorting-with-prettier - tailwind-merge - CSS Modules