Published on

Merge TailwindCSS Classes


1

Install the tailwind merge package

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

Updates delivered to your inbox!

A periodic update about my life, recent blog posts, how-tos, discoveries, things I am learning and amazing content for the community!

No spam - unsubscribe at any time!

Share with others