clsx / cn()

Définition

Utilitaires pour construire des chaînés de classes conditionnelles. cn() combine clsx + twMerge pour gérer les conditions ET les conflits Tailwind.

Analogie

Un assistant qui compose ta tenue selon la météo : si pluie alors parapluie, si froid alors manteau.

Exemple de code

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

const cn = (...inputs) => twMerge(clsx(inputs))

cn('p-4 bg-blue-500', isActive && 'bg-green-500',
  { 'opacity-50': isDisabled })
// => 'p-4 bg-green-500' si isActive

Cas d'usage

Gérer proprement les classes conditionnelles dans les composants React avec Tailwind.

Termes liés