Merge styles without conflicts with the Tailwind Merge library

You've probably been in this situation before: you're using a UI component that contains its own style, but for some specific reason you need to tweak some styles on a specific instance.

Say you want give a React <Button> component a "pill" shape with the rounded-full Tailwind class:

Depending on how the <Button> component is implemented, a few unwanted things may happen:

1. Nothing changes. No pill shape 😢
2. The rounded-full class is applied, but all the other classes are wiped out 🤔

This has to do with how the className attribute is being handled on the <Button> component, and whether the {...restProps} are being spread before or after that className attribute.

Ideally, we don't want to replace the <Button> classes with other classes.

We want to compose those classes together. Or even better: merge them without conflicts.

And this is where the Tailwind Merge library is super useful. It can save you from many subtle and often undiagnosed UI bugs that have to do with how the CSS cascade works, and the Tailwind CSS output source order.

I've made a video to highlight those tricky UI bugs you can create when composing conflicting Tailwind classes, and how Tailwind Merge makes those bugs go away.

The video was added to the official Tailwind Merge documentation README, and you can watch it here:

Let me know what you think!