
Mira el video si prefieres:
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

Cómo auto-publicar un sitio web Remix en Fly.io cuando se actualiza main
Checa este otro Post
