Tailwind CSS is a popular CSS framework that allows you to quickly and easily create stylish web pages. However, one of the challenges of using Tailwind CSS is that it can be difficult to merge or override Tailwind classes without causing style conflicts.

This is where twMerge comes in. twMerge is a JavaScript utility function that merges Tailwind CSS classes without style conflicts. It is a simple but powerful tool that can help you to write better code and reduce the risk of style conflicts.

View NPM package

Install twMerge

npm i tailwind-merge
yarn add tailwind-merge

Once you have installed twMerge, you can import it into your JavaScript code like this:

import { twMerge } from "tailwind-merge";

How twMerge Works

twMerge works by parsing the list of Tailwind classes you pass to it. It then identifies any classes that would conflict with each other and removes them from the list. Finally, it merges the remaining classes into a single list containing no style conflicts.

For example, the following code analyzes the px-3 and pr-4 classes:

const classes = twMerge("px-3", "pr-4");
// → 'pr-4'

const classes = twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]');
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'

Here we first pass the px-3 class as our default class which already exists in our component. Then we have pr-4 as our overriding class.

In the second example, with twMerge, the conflicting padding classes (px-2 py-1 p-3) can seamlessly merge with non-conflicting classes and our overriding styles. This allows for swift and efficient management of class conflicts.

Here are some of the pros and benefits of using twMerge:

• It can help simplify your code and make merging and overriding classes easier.

• It is a very lightweight function, so it will not significantly impact your code's performance.

• It is easy to use and understand.

Conclusion

twMerge is a simple but powerful JavaScript utility function that can help you to merge and override Tailwind CSS classes. If you use Tailwind CSS, I highly recommend giving twMerge it a try.