Merge TailwindCSS Classes

๐Ÿ“† ยท ๐Ÿ‘€
1

Install the tailwind merge package

Terminal window
yarn add tailwind-merge
# OR
npm install tailwind-merge
2

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;
3

Use it in a component

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