clsx

Qué es

clsx es una utilidad de JavaScript creada por Luke Edwards (lukeed) para construir cadenas de className de forma condicional. Pesa apenas 239 bytes y se presenta como una alternativa más pequeña y rápida al popular paquete classnames. Acepta strings, objetos, arrays anidados y valores dinámicos, devolviendo una cadena limpia de clases. Está escrita en JavaScript con tipos de TypeScript incluidos y se distribuye en formatos ES Module, CommonJS y UMD.

Para qué sirve

• Combinar varias clases CSS en un solo string a partir de condiciones booleanas.
• Activar o desactivar clases según props o estado en componentes de React, Vue, Svelte u otros frameworks.
• Construir clases dinámicas en proyectos con Tailwind CSS sin concatenar strings a mano.
• Simplificar lógica de presentación evitando expresiones ternarias largas y propensas a errores.

Cuándo usarlo

Es ideal cuando trabajas con interfaces basadas en componentes y necesitas aplicar clases según condiciones, especialmente junto a Tailwind CSS. Es la alternativa moderna a classnames cuando te importa el tamaño del bundle y el rendimiento. Si solo manejas strings y quieres aún menos peso, existe la variante clsx/lite (140 bytes) que ignora entradas no string.

Ejemplo

Instalación:

npm install clsx

Uso básico:

import clsx from 'clsx';

// Strings
clsx('foo', true && 'bar', 'baz');
// => 'foo bar baz'

// Objetos
clsx({ foo: true, bar: false });
// => 'foo'

// Arrays anidados
clsx(['foo', 'bar', { baz: true }]);
// => 'foo bar baz'

Puntos clave

• Tamaño mínimo: 239 bytes en su versión completa y 140 bytes en clsx/lite.
• Acepta múltiples tipos de entrada: strings, objetos, arrays y arrays anidados.
• Incluye definiciones de TypeScript y se distribuye en ESM, CommonJS y UMD.

Ten en cuenta

clsx solo construye la cadena de clases; no resuelve conflictos entre utilidades de Tailwind. Para deduplicar o fusionar clases en conflicto necesitarás combinarlo con herramientas como tailwind-merge. Su API es deliberadamente mínima, así que si esperas funciones adicionales más allá de componer clases, este no es su objetivo.