2 formas de usar utilidades Tailwind, dinámicamente.

Si estás trabajando con «Tailwind» seguro has necesitado agregar clases condicionalmente. Y te habrás dado cuenta de que no es algo tan fácil de hacer.

¡Pero te tengo buenas noticias!

Has llegado al post en el que vas a aprender 2 maneras diferentes para usar utilidades de Tailwind de forma dinámica, es decir, basándonos en variables.

Supongamos que tenemos un pequeño Switch hecho enteramente con Tailwind:

export function Switch() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      onClick={() => setIsActive((a) => !a)}
      className={`relative h-7 w-12 cursor-pointer rounded-full bg-gray-200 px-1 `}
    >
      <div
        className="absolute top-[50%] h-5 w-5 translate-y-[-50%] rounded-full bg-gray-500 transition-all left-1"
        // left-6 al activarlo 👈🏻
      />
    </button>
  );
}

Necesitamos sustituir la clase left-1 por left-6 cuando el estado isActive sea verdadero.

Si quieres ver el Switch en acción: mira aquí.

Solución #1: Backticks

También conocidas como template strings, nos permiten usar un ternario dentro del string:

export function Switch() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      onClick={() => setIsActive((a) => !a)}
      className={`relative h-7 w-12 cursor-pointer rounded-full bg-gray-200 px-1 `}
    >
      <div
  className={`absolute top-[50%] h-5 w-5 translate-y-[-50%] rounded-full bg-gray-500 transition-all ${
          isActive ? "left-6 " : "left-1" // 👈🏻 También podrías usar &&
        }`}

      />
    </button>
  );
}

Así resolvemos fácilmente la posición del Switch y de paso aprovechamos para hacerlo de forma animada con transition-all.

👀 ¡Ojo! Siempre puedes agregar más clases en los strings del ternario: isActive ? 'left-6 scale-95 bg-orange-500':''

Solución #2: clsx

clsx es una librería «open source» que busca sustituir al popular módulo classnames. Pero clsx más ligera y más rápida.

Esta herramienta nos permite invocar una función a la que le pasamos todas las clases que queramos incluir. Podemos pasarle condicionales en diferentes formatos. Si quieres saber más sobre clsx, mira aquí.

import { clsx } from 'clsx';

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

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

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

Como vez, tenemos muchas opciones, hay para todos. La alta compatibilidad siempre habla bien de una librería. 🔥

Así queda nuestro componente Switch

export function Switch() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      onClick={() => setIsActive((a) => !a)}
      className={clsx(
        `relative h-7 w-12 cursor-pointer rounded-full bg-gray-200 px-1 `,
        { ["bg-green-300"]: isActive },  // 👈🏻 como en classnames
        
      )}
    >
      <div
        className={clsx(
          "absolute top-[50%] h-5 w-5 translate-y-[-50%] rounded-full  transition-all",
          isActive ? "left-6" : "left-1",
          isActive && "bg-gray-200",
          !isActive && "bg-gray-500" // 👈🏻 ternario, ampersand, usa tu preferido.
        )}
      />
    </button>
  );
}

Espero que estas dos herramientas te sean útiles.

En mi caso, solía usar el ternario dentro de las backticks, pero últimamente he estado construyendo componentes buscando la máxima reusabilidad. Y me he encontrado con un código poco legible y frágil al tacto. Pero antes de desahuciar Tailwind, se le da la oportunidad a clsx. 🤓

Ya te contaré más sobre clsx, pero por ahora pruébalo tú y cuéntame.

Abrazo. Bliss.

Enlaces relacionados

clsx

Código del Switch

Mi twitter, pa que me cuentes