2 formas de usar utilidades Tailwind, dinámicamente.

Agregar clases de Tailwind de forma condicional, es un reto interesante, pues no podemos generarlas en el cliente, ya que no existirán en nuestro bundle.

Tomemos como ejemplo este switch, que hecho completamente en Tailwind, lo puedes encontrar en este Replit.

Para que al hacer click el switch se mueva, y se pongan en verde sus partes, debemos manipular las clases de Tailwind de este componente. ¿Cómo? Te presento 2 formas:

1. Usando backticks

Al interpolar una cadena de texto (string), podemos usar un ternario para intercambiar la clase entre dos distintas.

jsx

<div className={`${isActive ? "bg-green-500" : "bg-slate-500"}`} />

Gracias a que las clases que usamos ya están escritas en el código, Tailwind va a incluirlas en el bundle, lo que nos permite usarlas de esta forma, y funciona muy bien, aunque la sintaxis no es muy bonita. 😬

2. Usando clsx

clsx es una librería que nos ayuda a construir los classNames de nuestros elementos, de una forma más ordenada, y menos verbosa.

Solo instálala con:

bash

npm i clsx

Puedes ver el paquete de npm aquí.

Lo que realmente está haciendo clsx es combinar cadenas de texto (strings) para generar tu propiedad className para tus divs.

clsx toma tus argumentos, que pueden tener una gran variedad de formas:

javascript

clsx('hola','perro',true && 'como','estas');// => 'hola perro como estas'clsx({hola:true,perro:false});// => 'hola'clsx({hola:true},{perro:false});// => 'hola'clsx('hola',true && 'perro',false && 'gato');// => 'hola perro'clsx(['hola','perro']);// => 'hola perro'

Y las combina en un solo string que puedes añadir a tus elementos:

jsx

<div className={clsx('font-bold',isActive && 'text-green-500')} />

Mucho más legible, ¿no crees?

De hecho, clsx es el reemplazo moderno, de una librería más vieja llamada classnames.

🎬 ¿Te está gustando este contenido? Tenemos más tutoriales en video en nuestro canal de YouTube.

Ejemplo: Hagamos un switch

Ya que conoces las 2 formas de añadir clases de Tailwind dinámicamente, hagamos funcionar este switch:

jsx

import clsx from 'clsx';import { useState } from 'react';export const TailwindSwitch = () => {  const [isActive, setIsActive] = useState(false);  return (    <button      onClick={() => setIsActive(!isActive)}      className={clsx(        'h-7 w-14 rounded-full p-1 transition-all',        isActive ? 'bg-green-500' : 'bg-slate-300'      )}    >      <div        className={clsx(          'h-full aspect-square rounded-full bg-white transition-all',          isActive && 'translate-x-7'        )}      />    </button>  );};