Aprende a sincronizar estados entre elementos usando group y peer para construir componentes más inteligentes.
Con group y peer puedes cambiar estilos de un elemento en función del estado de otro, sin escribir CSS personalizado.
group sirve cuando el estado viene del contenedor padre, como una card con hover que afecta título y botón.
peer sirve cuando un input controla la apariencia de su label o mensaje asociado.
En esta lección vas a construir dos patrones muy usados en UIs modernas.
Al poner class group en el padre, puedes usar group-hover:* en hijos.
Este patrón evita JS para efectos visuales simples entre elementos relacionados.
Es perfecto para cards, listas y bloques clicables.
Mantén cambios sutiles para no sobrecargar la interfaz.
Usa peer en el input y peer-* en elementos hermanos para feedback reactivo.
Muy útil en formularios: error, validación o helper dinámico.
También encaja en toggles y filtros con checkbox/radio.
Evitas listeners JS para comportamientos básicos de estado.
Primero diseña estado base; luego añade group/peer solo donde aporten claridad.
Si todo reacciona a todo, la UI se vuelve difícil de mantener.
Aplica estas variantes en componentes concretos con intención clara.
Documenta el patrón en tu librería interna para reutilización rápida.
Aprende a sincronizar estados entre elementos usando group y peer para construir componentes más inteligentes.
Código del tema: Utilidades composables + responsive
Al poner class group en el padre, puedes usar group-hover:* en hijos.
Este patrón evita JS para efectos visuales simples entre elementos relacionados.
Es perfecto para cards, listas y bloques clicables.
Mantén cambios sutiles para no sobrecargar la interfaz.
<article class="group rounded-xl bg-slate-900 p-6">
<h3 class="text-slate-100 group-hover:text-emerald-300">Título</h3>
</article>Usa peer en el input y peer-* en elementos hermanos para feedback reactivo.
Muy útil en formularios: error, validación o helper dinámico.
También encaja en toggles y filtros con checkbox/radio.
Evitas listeners JS para comportamientos básicos de estado.
Primero diseña estado base; luego añade group/peer solo donde aporten claridad.
Si todo reacciona a todo, la UI se vuelve difícil de mantener.
Aplica estas variantes en componentes concretos con intención clara.
Documenta el patrón en tu librería interna para reutilización rápida.