javascript / intermediate
Snippet
Dynamic Class Utility Pattern
This utility combines clsx and tailwind-merge to handle dynamic class strings and resolve Tailwind CSS conflicts efficiently.
snippet.js
1
2
3
4
5
6
import { clsx } from 'clsx';import { twMerge } from 'tailwind-merge';export function cn(...inputs) {return twMerge(clsx(inputs));}
nextjs
Breakdown
1
export function cn(...inputs)
Defines a reusable function that accepts an arbitrary number of class name arguments.
2
return twMerge(clsx(inputs))
First merges conditional classes, then resolves any Tailwind CSS property conflicts.