blog icon indicating copy to clipboard operation
blog copied to clipboard

How to dynamically build tailwind class names

Open onmyway133 opened this issue 1 year ago • 0 comments

Inspired by shadcn

Combine

  • tailwind-merge: Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
  • clsx: constructing className strings conditionally.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs))
}

onmyway133 avatar Nov 04 '23 11:11 onmyway133