clsx / cn()

Tailwind CSS 🟡 Mid

Definition

Utilitaires pour construire des chaines de classes conditionnelles. cn() combine clsx + twMerge pour gerer les conditions ET les conflits Tailwind.

Analogie

Un assistant qui compose ta tenue selon la meteo : 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

Gerer proprement les classes conditionnelles dans les composants React avec Tailwind.

Termes lies

#styling#interview#tailwind