Recientemente descubrí un artículo de Dane Grant en el blog de thisdot.co sobre el uso de un enfoque híbrido de CSS y clases de utilidad con Tailwind 4.0. Esto me inspiró a adaptar esta metodología para utilizarla con herramientas actuales como Bricks Builder. Esta texto además desmiente una de las leyendas urbanas más comunes sobre Tailwind CSS: la supuesta imposibilidad de crear clases CSS mediante tokens.
Para implementar este enfoque, recomiendo trabajar con Flowtitude. Este plugin nos proporciona acceso a todas las características de Tailwind mediante tokens CSS. Básicamente, nos permite configurar y personalizar Tailwind para Bricks Builder utilizando variables CSS, de manera similar a las funcionalidades que se introducirán con Tailwind 4.0.
Independientemente de tu opinión personal sobre Tailwind, es indiscutible que las clases de utilidad son extremadamente útiles para diseñar sitios web con CSS. No soy partidario de un enfoque rígido de todo o nada que algunos usuarios de Tailwind han promovido tradicionalmente. Tener una cadena de clases que se extiende fuera de la pantalla en un monitor ultra ancho no es práctico. La combinación de clases CSS tradicionales con clases de utilidad ayuda a reducir el desorden de estilos en el marcado y ofrece algunas ventajas cuando se aplica correctamente. Así que vamos a explorar algunos patrones útiles y mejores prácticas para utilizar CSS y Tailwind en armonía.
Tailwind 4 y su enfoque de CSS Nativo
La versión 4 de Tailwind CSS introduce varias mejoras significativas, especialmente en el uso de tokens CSS. Esta actualización permite una integración más fluida de variables CSS en el flujo de trabajo de Tailwind, facilitando la creación de temas y la personalización de estilos.
Algunas de las principales mejoras incluyen:
- Tokens CSS: Ahora es más fácil utilizar variables CSS para definir colores, tamaños y otros estilos, permitiendo una mayor flexibilidad y reutilización de estilos en todo el proyecto.
- Compatibilidad mejorada: Tailwind 4 ha mejorado la compatibilidad con frameworks y herramientas modernas, haciendo más sencillo su uso junto a Bricks Builder y otros constructores visuales.
- Optimización del rendimiento: Las optimizaciones en la generación de CSS aseguran que los archivos de estilo sean más pequeños y eficientes, mejorando los tiempos de carga de las páginas web.
Utilizando Flowtitude para Integrar Tokens CSS
Gracias al plugin Flowtitude, podemos acceder a los valores del tema como variables CSS, lo que permite su uso en CSS nativo, archivos de configuración de Tailwind, el panel de Bricks Builder, y más. Esto facilita la gestión y aplicación de estilos de manera consistente a lo largo de todo el proyecto.
Por ejemplo, podemos definir estilos de esta manera:
.badge--red {
background-color: var(--color-red-50);
color: var(--color-red-600);
}O bien aplicar estilos con Tailwind y tokens CSS como valores arbitrarios:
<div class="p-[calc(var(--spacing-6)-1px)]">
<!-- Contenido -->
</div>
Efectos prácticos y cómo nos afectan
Aunque los puristas recomiendan utilizar estrictamente solo clases de utilidad, con el uso de constructores visuales y WordPress, este enfoque a veces parece imposible. Con este nuevo enfoque, resolvemos este inconveniente y, si seguimos algunos consejos de buenas prácticas, podemos tener lo mejor de ambos mundos con suma facilidad.
Clases específicas
Los archivos de CSS tienden a complicarse cuando usamos clases que son demasiado específicas con estilos que se aplican a solo uno o a una pequeña cantidad de casos de uso. Tomemos, por ejemplo, un calendario donde los días sean casillas de verificación personalizadas:
.calendar-date {
color: var(--color-gray-300);
background-color: var(--color-gray-800);
&:hover,
&:has(input[type="checkbox"]:focus) {
background-color: var(--color-gray-700);
}
& input[type="checkbox"]:checked + time {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
}
Es mejor dejar algunas cosas en manos de Tailwind
La mejor manera de evitar desviarse demasiado es seguir con clases de utilidad para ciertas cosas, como el espaciado y el diseño. Por lo general, varían en toda la página y codificarlos en una clase los hará mucho menos flexibles.
Un indicio de un enfoque erroneo puede ser cuando te das cuenta de que has abstraído algo en una clase y terminas anulando ciertos aspectos de sus estilos en diferentes lugares. Esos estilos probablemente deberías haberlos aplicado con clases de utilidad.
Clases como componentes
Tailwind siempre ha recomendado utilizar un sistema de componentes para los elementos de la interfaz de usuario. Definir componentes simples como botones, insignias, enlaces, etc., como clases funciona bien en la mayoría de los casos.
Puedes usar Tailwind CSS con la directiva @apply o definiciones de clases tradicionales:
.badge {
@apply inline-flex items-center gap-x-1.5 rounded-md py-0.5 text-sm/5 font-medium sm:text-xs/5;
}
.badge--yellow {
@apply bg-yellow-400/20 text-yellow-700;
}
De forma que luego es sencillo de aplicar
<span class="badge badge--yellow">Warning</span>
Uso de variables con Advanced Themer y Bricks Builder
Bricks Builder permite el uso de variables para definir diversas propiedades de los elementos a lo largo de sus paneles. Además, ofrece la posibilidad de añadir funciones como calc, max, min, etc., lo cual facilita la utilización de las variables de Tailwind CSS. Si estás utilizando Advanced Themer, puedes importar un archivo con las variables que te interesen, simplificando su aplicación y evitando la necesidad de memorizar sus nombres. Sin embargo, las reglas para nombrar las variables son sencillas de comprender y recordar.
A continuación, mostramos un pequeño ejemplo de cómo crear un archivo de importación para Advanced Themer:
"Font size":[
"text-xs",
"text-sm",
"text-base",
"text-lg",
"text-xl",
"text-2xl",
"text-3xl",
"text-4xl",
"text-5xl",
"text-6xl",
"text-7xl",
"text-8xl",
"text-9xl"
],
"Line height":[
"leading-3",
"leading-4",
"leading-5",
"leading-6",
"leading-7",
"leading-8",
"leading-9",
"leading-none",
"leading-tight",
"leading-snug",
"leading-normal",
"leading-relaxed",
"leading-loose"
],
"Letter spacing":[
"tracking-tighter",
"tracking-tight",
"tracking-normal",
...Como puedes ver, es sencillo crear tu propio archivo de importación. Solo necesitas agrupar los nombres de las distintas variables (sin el prefijo de dos guiones) en conjuntos que puedes nombrar según tus preferencias. Si eres miembro de Flowtitude, hemos creado un archivo con las clases que puedes utilizar en los distintos paneles de Bricks y que tiene sentido importar.
CSS moderno y otros patrones híbridos interesantes
Hemos visto cómo el uso de variables CSS puede simplificar la definición de estilos específicos en nuestras clases. Por ejemplo, utilizamos variables para definir colores y espaciados que luego aplicamos en nuestras clases CSS. Esto no solo mejora la consistencia, sino que también facilita la gestión de estilos a medida que el proyecto crece.
Usa de la terminología BEM
La metodología BEM (Bloque, Elemento, Modificador) es una forma estructurada de nombrar clases CSS que ayuda a mantener el código limpio y fácil de entender. Al combinar BEM con Tailwind, podemos crear clases CSS modulares y reutilizables. Por ejemplo:
.badge--red {
background-color: var(--color-red-50);
color: var(--color-red-600);
}Escribiendo componentes con @apply
Tailwind nos permite utilizar la directiva @apply para componer clases de utilidad en componentes reutilizables. Esto es útil para definir estilos comunes en un solo lugar y aplicarlos en todo el proyecto. Aquí hay un ejemplo:
.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;
}
Variables en clases específicas
Definir variables CSS y utilizarlas en clases específicas permite una mayor flexibilidad y modularidad. Por ejemplo, podríamos definir un conjunto de variables para un calendario:
.calendar-date {
color: var(--color-gray-300);
background-color: var(--color-gray-800);
&:hover,
&:has(input[type="checkbox"]:focus) {
background-color: var(--color-gray-700);
}
& input[type="checkbox"]:checked + time {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
}
Utilizando clases de utilidad siempre para el espaciado y el diseño
Para mantener la flexibilidad y evitar estilos demasiado rígidos, es recomendable utilizar clases de utilidad para espaciados y diseños. Por ejemplo:
<div class="p-[calc(var(--spacing-6)-1px)]">
<!-- Contenido -->
</div>
Evitar sobreescribir estilos
Un indicio de que un estilo debería ser una clase de utilidad es cuando te encuentras sobreescribiendo estilos en diferentes lugares. Mantener las clases de utilidad para aspectos como el espaciado y el diseño ayuda a mantener el código limpio y fácil de mantener.
Resumen
Esperamos con ansias la llegada de la versión 4 de Tailwind CSS, aunque ya es posible utilizar este enfoque híbrido con Bricks Builder y WordPress. El uso de Tailwind no tiene por qué ser un enfoque único para todos. Si quieres escribir algo de CSS, ¡hazlo! Con suerte, si sigues las buenas prácticas, te llevarán al éxito con tu proyecto.