Trabaja con Tailwind CSS y Bricks Builder a través de un enfoque híbrido

24 de junio de 2025

En el desarrollo web, es fácil caer en debates polarizados: ¿usar únicamente clases de utilidad o escribir CSS tradicional con sus propias reglas?
En la comunidad Flowtitude creemos que la respuesta no tiene por qué ser extrema. De hecho, la combinación inteligente de ambos enfoques puede llevarnos a un flujo de trabajo más eficiente, escalable y mantenible.

Esta idea no es nueva. Recientemente, Dane Grant publicó en el blog de thisdot.co un artículo sobre el enfoque híbrido de Tailwind 4.0, combinando clases de utilidad con CSS personalizado y tokens.
Nos inspiramos en ese planteamiento y lo adaptamos al entorno WordPress + Bricks Builder, aprovechando el potencial de Flowtitude para implementar esta metodología desde hoy, incluso antes de que Tailwind 4 esté disponible de forma general.

En este artículo veremos cómo funciona este enfoque, por qué rompe algunos mitos sobre Tailwind, y cómo puedes aplicarlo en tus proyectos para tener lo mejor de ambos mundos.

El mito: «Con Tailwind no puedes usar tokens CSS»

Uno de los comentarios que más escuchamos sobre Tailwind es que, al basarse en clases de utilidad, limita la creación de un sistema de diseño basado en tokens (variables CSS para colores, espaciados, tipografías, etc.).
Esto era cierto en cierta medida en versiones anteriores, donde el flujo de trabajo con variables no era tan directo, pero ya no lo es.

Tailwind 4 introduce una integración nativa con tokens CSS, lo que significa que podemos:

  • Definir variables (--color-primary, --spacing-4, etc.).
  • Usarlas en cualquier parte de Tailwind, incluso como valores arbitrarios (p-[var(--spacing-4)]).
  • Mantener consistencia visual en todo el proyecto sin sacrificar la flexibilidad de las clases de utilidad.

Y con Flowtitude, esta capacidad ya está disponible para usuarios de Bricks Builder, sin esperar a Tailwind 4.

Por qué un enfoque híbrido es más eficiente

El desarrollo con solo clases de utilidad tiene muchas ventajas: velocidad, consistencia, menos CSS no usado… pero también puede generar problemas:

  • Cadenas de clases tan largas que pierden legibilidad.
  • Dificultad para aplicar estilos muy específicos o condicionales.
  • Repetición de patrones que podrían centralizarse en un componente.

Por otro lado, solo usar CSS tradicional (con o sin preprocesadores) nos da control total, pero:

  • Podemos acabar con archivos extensos llenos de estilos poco reutilizables.
  • Es más difícil mantener la coherencia entre distintas partes del sitio.
  • El rendimiento se ve afectado si no eliminamos CSS no usado.

💡 La solución: Combinar lo mejor de cada mundo.

  • Usar clases de utilidad para espaciados, layout y tipografía (donde la variabilidad es alta).
  • Usar variables y clases personalizadas para componentes reutilizables o estilos muy específicos.

Qué aporta Tailwind 4 con su enfoque de CSS nativo

Aunque nuestro ejemplo funciona ya con Flowtitude, vale la pena entender lo que trae Tailwind 4:

  • Tokens CSS nativos
    Definimos variables globales para colores, espaciados, etc., y las usamos en cualquier clase o valor arbitrario.
  • Integración más fluida
    Mayor compatibilidad con frameworks y constructores como Bricks Builder.
  • Rendimiento optimizado
    Purga más inteligente y archivos CSS más pequeños.

Ejemplo con valor arbitrario y token:

<div class="p-[calc(var(--spacing-6)-1px)] bg-[var(--color-primary)]">
  Contenido
</div>

Cómo Flowtitude lo lleva más allá en Bricks Builder
Flowtitude ya permite trabajar con tokens y variables CSS de forma nativa en WordPress y Bricks Builder:

Variables accesibles en todos los contextos: CSS nativo, configuración de Tailwind, paneles de Bricks y Advanced Themer.

Importación de tokens predefinidos para no tener que memorizarlos.

Compatibilidad inmediata con el purge de Tailwind.

Por ejemplo, puedes definir un badge reutilizable en CSS:

.badge--red {
  background-color: var(--color-red-50);
  color: var(--color-red-600);
}

Y usarlo en tu HTML:

<span class="badge badge--red">Nuevo</span>

O aplicar tokens directamente en clases de utilidad:

<div class="px-[var(--spacing-4)] py-[var(--spacing-2)]">
  Botón híbrido
</div>

Patrones y buenas prácticas para el enfoque híbrido

✅ Usa clases personalizadas cuando…

  • El estilo se repite en múltiples lugares.
  • El patrón es complejo y difícil de describir con solo utilidades.
  • Hay lógica condicional o estados que afectan a varios estilos a la vez.

✅ Deja que Tailwind gestione…

  • Espaciado (p-4, mt-6, gap-2).
  • Layout (flex, grid, items-center, justify-between).
  • Tipografía (text-lg, font-semibold).

✅ Evita…

  • Crear clases para estilos que cambian constantemente.
  • Sobreescribir utilidades en múltiples lugares (signo de mal diseño).

Ejemplos reales

Calendario con estilos híbridos

.calendar-date {
  color: var(--color-gray-300);
  background-color: var(--color-gray-800);
}

.calendar-date:hover,
.calendar-date:has(input[type="checkbox"]:focus) {
  background-color: var(--color-gray-700);
}

.calendar-date input[type="checkbox"]:checked + time {
  background-color: var(--color-indigo-600);
  color: var(--color-white);
}

HTML con utilidades:

<div class="calendar-date flex items-center justify-center p-2 rounded">
  <input type="checkbox" class="hidden" />
  <time>15</time>
</div>

Badge como componente con @apply

.badge {
  @apply inline-flex items-center gap-x-1.5 rounded-md py-0.5 text-sm font-medium;
}

.badge--yellow {
  @apply bg-yellow-400/20 text-yellow-700;
}

HTML:

<span class="badge badge--yellow">Warning</span>

Importación de tokens en Advanced Themer

Archivo JSON para tipografía:

"Font size":[
   "text-xs",
   "text-sm",
   "text-base",
   "text-lg",
   "text-xl",
   "text-2xl",
   "text-3xl",
   "text-4xl"
],
"Line height":[
   "leading-3",
   "leading-4",
   "leading-5",
   "leading-6"
]

Esto permite tener todos los tamaños y alturas de línea de Tailwind disponibles como opciones en Bricks sin tener que recordarlas.

Resumen y conclusión

El enfoque híbrido no es una concesión, sino una estrategia para aprovechar la potencia de Tailwind sin perder la flexibilidad del CSS tradicional.

En Flowtitude, lo usamos a diario para:

  • Mantener un diseño coherente gracias a tokens y variables.
  • Aprovechar la velocidad y el rendimiento de las clases de utilidad.
  • Reducir el CSS sobrante en producción.

Con Flowtitude y Bricks Builder, ya puedes aplicar este sistema hoy mismo.
No tienes que esperar a Tailwind 4: puedes empezar a trabajar con tokens, variables y utilidades de forma integrada, escalable y fácil de mantener.

¿Has probado a combinar un constructor visual con Tailwind? ¿Qué ventajas y retos has encontrado? Cuéntalo en el foro y sigamos mejorando el flujo juntos.