🧩 Selectores especiales en Tailwind: group y peer

📘 Introducción

Tailwind utiliza clases como group y peer para aplicar estilos a elementos en función del estado de otros elementos relacionados, como un contenedor padre o un elemento adyacente.

👨‍👧 Ejemplo padre-hijo

Texto que cambia al pasar el mouse por el contenedor

👯 Ejemplo elementos adyacentes

👥 Uso de group

🔧 Cómo era en CSS

/* CSS tradicional */
.padre:hover .hijo {
  color: red;
}

💡 Cómo es en Tailwind

<div class="group">
  <p class="group-hover:text-red-500">Texto hijo</p>
</div>

📘 Explicación

Se aplica la clase group al contenedor, y luego en los hijos se usa group-hover: para modificar su estilo según el estado del padre.

📊 Tabla Comparativa

Acción CSS Tailwind
Hover sobre padre .padre:hover .hijo group-hover:
Focus sobre padre .padre:focus .hijo group-focus:

🧍 Uso de peer

🔧 Cómo era en CSS

/* CSS tradicional */
input:checked + p {
  display: block;
}

💡 Cómo es en Tailwind

<input type="checkbox" class="peer">
<p class="peer-checked:block hidden">Texto visible solo cuando el checkbox está activo</p>

📘 Explicación

Aplica peer al elemento que actúa como "referencia" y luego usa peer-estado: en el elemento dependiente para reaccionar a su estado.

📊 Tabla Comparativa

Acción CSS Tailwind
Elemento adyacente visible con checkbox input:checked + p peer-checked:
Elemento responde al focus del anterior input:focus + label peer-focus:

🧩 Reglas Personalizadas con group-[selector]: y peer-[selector]:

Tailwind permite definir estilos condicionales basados en cualquier selector válido (clase, atributo, pseudoclase, etc.) usando corchetes []. Esto extiende su flexibilidad para situaciones donde no hay una variante predefinida como hover: o focus:.

Ejemplo: group-[.activo]:text-green-600

Este texto se vuelve verde si el grupo tiene la clase .activo.

Este texto no cambia porque no hay clase .activo en el padre.

Ejemplo: peer-[:checked]:bg-blue-200

Comparativa

Clase Tailwind Selector Detectado Resultado
group-[.activo]:text-green-600 Padre con clase .activo El hijo se muestra en verde
peer-[:checked]:bg-blue-200 Elemento input con estado checked El siguiente elemento cambia el fondo
group-[aria-expanded=true]:text-red-500 Padre con atributo aria-expanded="true" El hijo se muestra en rojo

Recuerda: estos selectores personalizados deben escribirse exactamente como aparecen en el HTML del elemento padre o peer, y se evalúan directamente en el navegador.

🧩 Grupos y Peers Nombrados en Tailwind

Desde Tailwind v3.3 puedes nombrar tus group y peer para controlar múltiples contextos sin conflicto. Así, puedes tener varios grupos o peers en el mismo componente, y cada uno aplicar variantes específicas sin interferir entre sí.

Grupo A

Este texto cambia de color si el grupo A se hace hover

Grupo B

Este texto cambia de color si el grupo B se hace hover

Este texto se vuelve verde si el checkbox está marcado

📊 Comparativa: Sintaxis con nombre

Elemento Clase Tailwind Descripción
Padre group/a Define un grupo con el nombre a
Hijo reactivo group-hover/a:bg-blue-100 Aplica estilo si el grupo "a" está en hover
Peer peer/toggle Define un peer con el nombre toggle
Hijo reactivo peer-checked/toggle:text-green-600 Aplica estilo si el peer "toggle" está marcado