Tailwind Merge: clean your code by removing conflicting styling
Managing CSS styles efficiently can be a challenge, especially in projects that use Tailwind, where the nature of utility classes is to have quite a bunch of them together — inevitably having some overlap when inheriting styling from different sources.
From their documentation we have the following example
that shows how Tailwind Merge combines the classes
px-2 py-1 with
p-3 and results in an overall cleaner list of classes, and explains in extremely simple terms the core of Tailwind Merge. There are more examples available in the
tailwind-merge npm package (Opens in a new tab) by Dany Castillo (Opens in a new tab) When and how to use it documentation page in Tailwind Merge GitHub repository (Opens in a new tab).
It's probably not the easiest to implement in an already-existing project, and the author also puts a lot of cases in favour and against using it. The readme section in GitHub of
tailwind-merge (Opens in a new tab) contains all the information you'll need to weight in whether it's going to be the solution you were looking for in your project, or if you should approach your issues from a different perspective.
I'd personally try to use it from the get-go, as implementing it in an already-existing project would require some refactoring that might or might not be time-consuming, but it's completely harmless to have it and update its usage progressively!