LifeUI
1.53.2
Inicio

Cn

Una función de utilidad que combina el uso de `clsx` y `tailwind-merge` para una gestión sencilla de los nombres de clases de Tailwind CSS.

Que hace esta utilidad por ti?:

  • Combina los nombres de clase de Tailwind CSS con la gestión de prioridades.
  • Admite nombres de clase condicionales con la flexibilidad de clsx.
  • Simplifica la gestión de clases CSS de Tailwind: evita problemas de nombres de clases repetitivos y conflictivos.

Importación

import { cn } from "@blifedesarrollo/blife-ui/utils/cn";

Uso basico

const className = cn("bg-red-500", "text-text-strong", "bg-bg-subtle");
 
console.log(className); // -> "text-text-strong bg-bg-subtle"

Clases condicionales

const isActive = true;
 
const className = cn("bg-bg-soft text-text-subtle", {
  "text-primary-base": isActive,
  "bg-primary-base": isActive,
});
 
console.log(className); // -> "text-primary-base bg-primary-base"

Uso con array de clases

const className = cn("bg-black", ["text-white", "rounded-lg"]);
 
console.log(className); // -> "bg-black text-white rounded-lg"
Tree Navigation
Se utiliza para mostrar la navegación principal en la barra lateral de una aplicación.
Autocomplete search
Autocompletar la entrada del usuario con una lista de opciones