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

javascript

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
 
export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

nextjs

Breakdown

export function cn(...inputs)

Defines a reusable function that accepts an arbitrary number of class name arguments.

return twMerge(clsx(inputs))

First merges conditional classes, then resolves any Tailwind CSS property conflicts.