Tailwind CSS: límites de los sistemas de diseño para desarrolladores

El artículo analiza los problemas de Tailwind CSS al construir sistemas de diseño escalables. Se consideran enfoques CVA, variables CSS y @utility con ejemplos de código. Recomendaciones para desarrolladores middle/senior sobre cómo evitar deuda técnica.

By Sudonull Editorial Team • Published 2026-04-14 • Updated 2026-04-14

Tailwind CSS destruye los sistemas de diseño: por qué y cómo arreglarlo

# Por qué Tailwind CSS limita los sistemas de diseño escalables: Análisis de enfoques

Tailwind CSS acelera el prototipado, pero su enfoque utility-first genera dolores de cabeza al escalar. En sistemas de diseño, componentes como botones necesitan combinaciones de variantes, tamaños y estados. Agregar una nueva variación como btn-focus debe integrarse sin problemas con btn-sm, btn-lg, btn-outline. Estados como hover (15% más oscuro) o active (10% más brillante) deben aplicarse de forma consistente en todos los casos. Los frameworks tradicionales manejan esto con mixins, como:

.button-variant-other(@color; @background; @border);

Tailwind carece de herramientas nativas para esta integración fluida sin compromisos.

CVA: Rápido pero limitado

Shadcn usa CVA para botones con variantes y tamaños fijos:

variant "default" | "outline" | "ghost" | "destructive" | "secondary" | "link"
size "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"

Ventajas:

Desarrollo rápido sin saltar entre archivos.
API limpia para casos básicos.

Desventajas en proyectos a largo plazo:

No se puede crear primary outlined small sin trucos.
Combinaciones fijas acumulan deuda técnica tras 6+ meses.

Ideal para apps simples, pero en desarrollo empresarial, eleva costos.

Variables CSS: La solución flexible

Las variables CSS separan la lógica de estados de las variantes:

.btn {
  @apply inline-flex items-center justify-center rounded px-4 py-2 font-body;
  background-color: var(--btn-color);
  color: var(--btn-text, white);
}

.btn:hover {
  background-color: color-mix(in srgb, var(--btn-color), black 15%);
}

.btn:active {
  filter: brightness(1.1);
}

.btn-primary {
  --btn-color: theme('colors.blue.600');
}
.btn-whatever {
  --btn-color: …;
}

Beneficios clave:

Estados automáticos para cualquier color.
Fácil adición de variantes vía variables.
Compatible con cualquier librería de UI.

Desventaja para fans de Tailwind: pierde algo de velocidad al mover estilos a archivos separados.

Directiva @utility: Un hack utilitario

La directiva genera clases dinámicamente:

@utility btn-* {
  font-size: --value(--text-ui-*, [length]);
  background-color: --value(--color-ui-*, [color]);
  color: --value(--color-ui-*-text, [color]);
}

Se combina con modificadores de Tailwind para hover o responsive. Pero:

btn-focus no escala a sm o lg—las clases funcionales fallan.
Construir primary small outline requiere ajustes frágiles en componentes.
Se desmorona con combinaciones complejas.

Comparación de enfoques

|-------------|-----------|---------------|------------------------|----------------------|

CVA brilla en MVPs, variables CSS en producción, @utility como término medio.

Lecciones clave

Tailwind no dicta la estructura: El enfoque utility-first exige un sistema casero.
Componentes como clases: Bloquea sistemas de diseño complejos en opciones rígidas.
Alerta de deuda técnica: La simplicidad inicial implica refactorización en seis meses.
Alternativas funcionan: Las variables CSS ofrecen flexibilidad sin abandonar Tailwind.

Tailwind es genial para arranques rápidos, pero sistemas de diseño maduros necesitan configuraciones híbridas o relajar las riendas utilitarias.

— Editorial Team