Tailwind-merge Library for Seamless Tailwind CSS Integration

Frontend web developers seek easy and efficient ways to manage their CSS styles. Because of the utility-first approach and extensive set of pre-defined classes, Tailwind CSS has gained significant popularity in recent years. Which meets the majority of developers' stylistic demands. Like other tech tools, it has limitations and drawbacks, though one that irritated me can be minimized using Tailwind-merge, which is what we'll talk about today.

What is tailwind-merge?

Tailwind-Merge is a cutting-edge utility that extends the functionality of Tailwind CSS, offering advanced features for managing and merging utility classes. This tool is designed to enhance the developer experience, providing a more efficient and expressive way to handle complex styling scenarios. It is particularly useful in components-based applications such as ReactJS, Vue Js and other JS where dynamic styling based on state, props, or other conditions is common.

Let's create a generic button component in React Js.

const ButtonComponent = ({ children}) => {
  return (
    <button className='text-xl font-bold leading-[16px] overflow-hidden max-w-full'>
      {children}
    </button>
  );
};

export default ButtonComponent;

<ButtonComponent>Submit</ButtonComponent>

Now let's update this component so that its styling can be overridden through a passed prop className.

const ButtonComponent = ({ children, className}) => {
  return (
    <button className={'text-xl font-bold leading-[16px] overflow-hidden max-w-full' + className}>
      {children}
    </button>
  );
};

export default ButtonComponent;

<ButtonComponent className='text-xs'>Submit</ButtonComponent>

If we execute this code example, you will observe that the new class "text-xs" won’t apply but previous classes won't work as well because when we use string interpolation or concatenate partial class names together, Tailwind will not find classes and therefore will not generate the corresponding CSS.

Now, we can get the required style by utilizing Tailwind-merge instead of string interpolation.

import { twMerge } from 'tailwind-merge';

const ButtonComponent = ({ children, className}) => {
  return (
    <button className={twMerge('text-xl font-bold leading-[16px] overflow-hidden max-w-full ',className)}>
   {children}
    </button>
  );
};

export default ButtonComponent;

<ButtonComponent className='text-xs'>Submit</ButtonComponent>

How to use Tailwind Merge

We can add Tailwind-merge in our project using packages like npm or yarn

npm i tailwind-merge
yarn add tailwind-merge

Add import twMerge function in our code

import { twMerge } from 'tailwind-merge';

The twMerge function is a utility function that can take two or more strings, each containing Tailwind CSS classes, as its parameters. It combines these strings and returns a new string that includes all the Tailwind CSS classes that can be easily mapped to corresponding CSS styles.

twMerge(string1,string2)
// example from above ButtonComponent
twMerge('text-xl font-bold leading-[16px] overflow-hidden max-w-full ',className)

When merging the strings, if there are classes in multiple strings that affect the same CSS style, then tailwind classes in the right string will take precedence over its left counterpart.

twMerge(string1,string2)
twMerge("text-xl","text-xs")

The classes from string2 have a higher order than string1 so it will override the string1 class and keep everything else untouched. This means that the resulting string will have the combined class from all input strings, but if there are conflicting classes, the ones from the later string will take precedence.

For example, in the above example the font-size property of class "text-xs" will have higher precedence than "text-xl" and the return class string will be "text-xs" which will override the class from "text-xl".

---

Conclusion

Integrating twMerge into your component-based projects can greatly enhance the flexibility and ease of managing Tailwind CSS classes.

By enabling dynamic composition based on conditions, state, and props, this library streamlines the process of creating responsive and interactive user interfaces.

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions. 😎😎

Till then, Keep on Hacking,

Cheers & Happy Coding!!