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 straight in your inbox!

A periodic update about my life, recent blog posts, TIL (Today I learned) related stuff, things I am building and more!

Share with others