Merge TailwindCSS Classes

Install the tailwind merge package

yarn add tailwind-merge

# OR

npm install tailwind-merge

Create a utility function to accept multiple classnames and merge them

// lib/classNames.ts

import { twMerge } from 'tailwind-merge';

const classNames = (...classes: string[]) => {
  return twMerge(classes.filter(Boolean).join(' '));
};

export default classNames;

Use it in a component

See how it is can be used in the Gradient text snippet