Más control, más expresividad y un diseño mucho más contextual

Esta semana hemos ampliado y mejorado la configuración de Tailwind dentro del ecosistema Flowtitude añadiendo un conjunto de variantes personalizadas que permiten escribir estilos mucho más precisos y estructurados, especialmente útiles en Bricks, Gutenberg y cualquier flujo de trabajo avanzado con WordPress.

Estas variantes no sustituyen nada de lo existente: lo complementan y te permiten controlar mejor las relaciones entre elementos, sin hacks ni selectores complejos.

A continuación te explico qué hace cada una y en qué casos resulta realmente útil.

parent:

Te permite algo tan sencillo y útil como aplicar estilos al padre desde el propio hijo. No depende de estados ni de lógica: simplemente selecciona al contenedor directamente desde dentro, algo tremendamente práctico cuando trabajas con tarjetas, formularios o wrappers que dependen de lo que contienen.

child:

Te da el control sobre los hijos directos de un elemento, sin afectar a su contenido interno. Esto marca una diferencia importante respecto al selector universal *:: mientras *: alcanza a todos los descendientes, child: solo actúa en el primer nivel. Es una herramienta mucho más limpia para listas, grids, colecciones de bloques o cualquier estructura donde no quieras “contaminar” elementos internos.

next: y siblings:

Permiten dirigirte a los elementos que vienen después. El primero se centra en el hermano inmediato; el segundo en todos los siguientes. Son increíblemente útiles en interfaces secuenciales, pasos de formularios o cualquier diseño donde un elemento influye visualmente en los que le siguen.

prev: y prev-siblings:

Hacen exactamente lo contrario: permiten actuar sobre los elementos que vienen antes. Algo tan simple como marcar los pasos ya completados en un proceso, o destacar los elementos previos en un timeline, se vuelve instantáneo y sin necesidad de añadir clases adicionales.

Variantes ARIA

Hemos añadido variantes para estados accesibles como:

• aria-expanded
• aria-pressed
• aria-selected
• aria-current

Con estas variantes se pueden crear componentes más accesibles y expresivos sin añadir lógica ni estructuras extra. Son especialmente útiles en acordeones, menús, pestañas, toggles y navegación.

✨ ¿Qué significa todo esto para ti?

Estas variantes hacen que Tailwind sea:

• más predecible
• más expresivo
• más accesible
• más semántico
• más potente en Bricks y Gutenberg

Podrás construir componentes complejos sin recurrir a hacks, sin sobrescribir clases y con un control mucho más granular del árbol DOM.