Override Tailwind Classes using Tailwind-Merge

As web development continues to evolve, developers seek efficient ways to manage their CSS styles. Tailwind CSS has gained significant popularity in recent years due to its utility-first approach and extensive set of pre-defined classes. Which caters to most of developer’s styling needs, However, like every tech tool out there, it has its limitation and setbacks, Luckily one of them that annoyed me a lot can be mitigated though Tailwind-merge and today we will discuss just that.

What is Tailwind Merge

Simply put Tailwind Merge is a powerful utility that enables us as developers to compose new CSS classes by merging existing utility classes together.

Now a good question could be, when would we even need to to that? let’s say you want to create a generic component that will be used throughout your website, you want to give it a generic style but want it to be customizable enough to meet any specific needs. Unlike normal CSS style classes we cannot do string interpolation in Tailwind but with Tailwind Merge that won’t be a problem. Here’s an example that further illustrates the point:

Scenario

Let’s create a generic Text component:

const Text = ({ children}) => {
  return (
    <div className='text-[1.25rem] leading-[1.875rem] overflow-hidden max-w-full'>
      <span>{children}</span>
    </div>
  );
};

export default Text;
<Text> Hi there<Text>

Now lets update this component so that its styling can be overridden through a passed prop className:

const Text = ({ children, className}) => {
  return (
    <div className={'font-normal text-[1.25rem] leading-[1.875rem] overflow-hidden max-w-full ' + className}>
      <span>{children}</span>
    </div>
  );
};

export default Text;
<Text className='font-bold'> Hi there<Text>

If we run this code example, you will observe that not only will the new class font-bold won’t apply but previous classes wont 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, instead of string interpolation, using Tailwind-merge will give us our desired style:

import { twMerge } from 'tailwind-merge';

const Text = ({ children, className}) => {
  return (
    <div className={twMerge('font-normal text-[1.25rem] leading-[1.875rem] overflow-hidden max-w-full ',className)}>
      <span>{children}</span>
    </div>
  );
};

export default Text;
<Text className = 'font-bold'> Hi there<Text>

How to work with Tailwind Merge

• ***First, add Tailwind-Merge in your project using your favorite's package manage like yarn or npm:

yarn add tailwind-merge	// OR
npm i tailwind-merge

And then import twMerge function in your 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 scanerio
twMerge('font-normal text-[1.25rem] leading-[1.875rem] 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 right string will take precedence over its left counterpart.

For example, in case of 2 strings:

twMerge(string1,string2)

twMerge(**"bg-red-500"**,**"bg-blue-500"**)

The classes from the second string (string2) will override the classes from the first string (string1). This means that the resulting string will have the combined classes from all the input strings, but if there are conflicting classes, the ones from the later strings will take precedence.

For example, if we have the following function call: twMerge("bg-red-500", "bg-blue-500"), the returned string will be "bg-blue-500", as the class from string2 overrides the class from string1.

In summary, the twMerge function is a convenient way to merge Tailwind CSS classes and mitigates the limitation of composing style classes which Tailwind has in its current iteration.

This article was written by Farrukh Ahmed, Co-founder and HR Executive at Antematter.io