Lição 19 de 30

group e peer no Tailwind: Estados Dependentes — Web Academy

Em designs de interfaces sofisticados, os componentes raramente reagem de forma isolada: ao passar o mouse sobre a área inteira de um cartão (card), você deseja que o ícone interno rotacione, o título mude de cor e uma seta indicativa deslize para a direita. Ou, em formulários modernos, quando um campo de entrada recebe o foco, o rótulo de texto (label) deve flutuar suavemente para cima. No CSS tradicional, criar essas relações dependentes exigia escrever seletores descendentes complexos (.card:hover .icon) ou combinadores de irmãos (input:focus ~ label). No Tailwind CSS, você orquestra essas coreografias reativas sem sair do HTML e sem escrever uma única linha de JavaScript através dos modificadores estruturais group e peer.

📑 Índice do Conteúdo

1. O Modificador group: Estilizando Filhos a Partir do Pai

O modificador group resolve a relação hierárquica Pai → Filho. O mecanismo funciona em duas etapas simples:

Você marca o elemento pai com a classe utilitária group.
Em qualquer elemento filho interno, você utiliza o prefixo group-hover:, group-focus: ou group-active: seguido da classe que deseja aplicar.

HTML5 11 linhas

<!-- Quando o usuário passa o mouse sobre o CARD INTEIRO... -->
<div class="group p-6 bg-slate-900 border border-slate-800 rounded-2xl hover:border-emerald-500 transition-colors">
    <!-- ...o título muda de cor... -->
    <h3 class="text-white group-hover:text-emerald-400 font-bold transition-colors">
        Arquitetura Serverless
    </h3>
    <!-- ...e a seta desliza 4px para a direita! -->
    <span class="inline-block text-slate-400 group-hover:text-emerald-400 group-hover:translate-x-1 transition-all">
        Explorar trilha →
    </span>
</div>

<!-- Quando o usuário passa o mouse sobre o CARD INTEIRO... -->
<div class="group p-6 bg-slate-900 border border-slate-800 rounded-2xl hover:border-emerald-500 transition-colors">
<!-- ...o título muda de cor... -->
<h3 class="text-white group-hover:text-emerald-400 font-bold transition-colors">
Arquitetura Serverless
</h3>
<!-- ...e a seta desliza 4px para a direita! -->
<span class="inline-block text-slate-400 group-hover:text-emerald-400 group-hover:translate-x-1 transition-all">
Explorar trilha →
</span>
</div>

Sob o capô, o Tailwind compila essa instrução gerando um seletor CSS puro de alta especificidade:

CSS3 4 linhas

/* Compilação gerada pelo motor do Tailwind CSS */
.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

/* Compilação gerada pelo motor do Tailwind CSS */
.group:hover .group-hover\:translate-x-1 {
transform: translateX(0.25rem);
}

🧪 Quer testar cards reativos e floating labels no Playground IDE?
Abrir no Playground IDE →

2. O Modificador peer: Comunicação Entre Elementos Irmãos no DOM

Enquanto o group olha para a árvore hierárquica de cima para baixo (de pai para filho), o modificador peer (do inglês “par” ou “colega”) resolve a relação horizontal entre elementos irmãos no mesmo nível do DOM.

O uso clássico do peer reside em formulários interativos: você marca um elemento <input> como peer e estiliza os elementos subsequentes (como ícones, rótulos ou mensagens de erro) com base no estado do input (peer-focus:, peer-invalid:, peer-checked:).

HTML5 7 linhas

<!-- 1. O input é marcado como peer -->
<input type="email" placeholder=" " class="peer w-full bg-slate-950 border border-slate-800 rounded-lg p-3 text-white focus:border-emerald-500 outline-none" required />
 
<!-- 2. O texto de erro só se torna visível se o input for inválido -->
<p class="hidden peer-invalid:block text-xs text-red-400 mt-1">
    Por favor, informe um endereço de e-mail corporativo válido.
</p>

<!-- 1. O input é marcado como peer -->
<input type="email" placeholder=" " class="peer w-full bg-slate-950 border border-slate-800 rounded-lg p-3 text-white focus:border-emerald-500 outline-none" required />
<!-- 2. O texto de erro só se torna visível se o input for inválido -->
<p class="hidden peer-invalid:block text-xs text-red-400 mt-1">
Por favor, informe um endereço de e-mail corporativo válido.
</p>

3. Matriz Comparativa de Seletores Estruturais

A tabela a seguir contrasta o funcionamento e as regras dos dois modificadores no Tailwind CSS:

Modificador	Relação no DOM	Sintaxe da Variante	Aplicação Típica em Interfaces
`group`	Pai → Elementos Filhos	`group-hover:scale-105`	Cards de catálogo, itens de menu e botões com ícones animados.
`peer`	Irmão Anterior → Irmão Sucessor	`peer-focus:text-emerald-400`	Floating labels, validação de inputs e toggles/switches customizados.
`group/{nome}`	Pai Específico Nomeado	`group-hover/card:bg-slate-800`	Componentes complexos aninhados (evita disparar grupos externos).
`peer/{nome}`	Irmão Específico Nomeado	`peer-checked/toggle:translate-x-6`	Formulários densos com múltiplos inputs adjacentes.

4. Grupos e Peers Nomeados: Resolvendo Conflitos em Árvores Aninhadas

Imagine um cenário comum: você tem um card interativo com group e, dentro desse card, existe um botão que também precisa de um efeito group próprio. Se ambos utilizarem apenas a classe group, passar o mouse sobre o card pai ativará inadvertidamente as animações do botão filho!

Para solucionar essa colisão de escopo, o Tailwind introduziu os identificadores nomeados com barra (/):

HTML5 11 linhas

<!-- Card Pai Nomeado: group/card -->
<div class="group/card bg-slate-900 p-6 rounded-2xl hover:bg-slate-800 transition-colors">
    <h3 class="group-hover/card:text-emerald-400">Plano Enterprise</h3>
 
    <!-- Botão Filho Nomeado: group/btn -->
    <button class="group/btn mt-4 px-4 py-2 bg-emerald-600 rounded-lg text-white">
        Assinar Agora
        <!-- Esta seta só se mexe quando o mouse passa DIRETAMENTE sobre o botão! -->
        <span class="inline-block group-hover/btn:translate-x-1 transition-transform">→</span>
    </button>
</div>

<!-- Card Pai Nomeado: group/card -->
<div class="group/card bg-slate-900 p-6 rounded-2xl hover:bg-slate-800 transition-colors">
<h3 class="group-hover/card:text-emerald-400">Plano Enterprise</h3>
<!-- Botão Filho Nomeado: group/btn -->
<button class="group/btn mt-4 px-4 py-2 bg-emerald-600 rounded-lg text-white">
Assinar Agora
<!-- Esta seta só se mexe quando o mouse passa DIRETAMENTE sobre o botão! -->
<span class="inline-block group-hover/btn:translate-x-1 transition-transform">→</span>
</button>
</div>

5. Exemplo Prático: Card Interativo + Floating Label Input

Examine a composição abaixo. Ela reúne um card de serviço com deslocamento de ícone orquestrado por group e um campo de entrada com rótulo flutuante construído com peer:

HTML5 51 linhas

<div class="max-w-md mx-auto space-y-6">
 
    <!-- 1. CARD INTERATIVO COM GROUP -->
    <div class="group cursor-pointer bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl 
                hover:border-emerald-500/50 hover:shadow-emerald-500/10 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div class="size-12 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl
                        group-hover:bg-emerald-500/20 group-hover:border-emerald-500/40 group-hover:scale-110 transition-all duration-300">
                ⚡
            </div>
            <span class="text-xs font-semibold text-slate-400 group-hover:text-emerald-400 transition-colors">
                Ativo
            </span>
        </div>
 
        <h3 class="text-lg font-bold text-white mt-4 group-hover:text-emerald-400 transition-colors">
            Pipelines de Alta Performance
        </h3>
        <p class="text-xs text-slate-400 mt-1 leading-relaxed">
            Automação de compilação com deploy contínuo em menos de 30 segundos.
        </p>
 
        <div class="mt-4 flex items-center gap-1.5 text-xs font-semibold text-emerald-400">
            <span>Acessar painel de controle</span>
            <span class="inline-block group-hover:translate-x-1.5 transition-transform duration-200">→</span>
        </div>
    </div>
 
    <!-- 2. FLOATING LABEL INPUT COM PEER -->
    <div class="relative bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
        <div class="relative">
            <input 
                type="text" 
                id="workspace" 
                placeholder=" " 
                class="peer w-full bg-slate-950 border border-slate-800 rounded-xl px-4 pt-6 pb-2 text-sm text-white outline-none
                       focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all" 
                required 
            />
            <label 
                for="workspace" 
                class="absolute left-4 top-4 text-xs font-medium text-slate-500 transition-all duration-200 pointer-events-none
                       peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm peer-placeholder-shown:text-slate-500
                       peer-focus:top-1.5 peer-focus:text-[10px] peer-focus:text-emerald-400
                       peer-[:not(:placeholder-shown)]:top-1.5 peer-[:not(:placeholder-shown)]:text-[10px] peer-[:not(:placeholder-shown)]:text-emerald-400">
                Nome do Workspace
            </label>
        </div>
    </div>
 
</div>

<div class="max-w-md mx-auto space-y-6">
<!-- 1. CARD INTERATIVO COM GROUP -->
<div class="group cursor-pointer bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl 
hover:border-emerald-500/50 hover:shadow-emerald-500/10 transition-all duration-300">
<div class="flex items-center justify-between">
<div class="size-12 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl
group-hover:bg-emerald-500/20 group-hover:border-emerald-500/40 group-hover:scale-110 transition-all duration-300">
⚡
</div>
<span class="text-xs font-semibold text-slate-400 group-hover:text-emerald-400 transition-colors">
Ativo
</span>
</div>
<h3 class="text-lg font-bold text-white mt-4 group-hover:text-emerald-400 transition-colors">
Pipelines de Alta Performance
</h3>
<p class="text-xs text-slate-400 mt-1 leading-relaxed">
Automação de compilação com deploy contínuo em menos de 30 segundos.
</p>
<div class="mt-4 flex items-center gap-1.5 text-xs font-semibold text-emerald-400">
<span>Acessar painel de controle</span>
<span class="inline-block group-hover:translate-x-1.5 transition-transform duration-200">→</span>
</div>
</div>
<!-- 2. FLOATING LABEL INPUT COM PEER -->
<div class="relative bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
<div class="relative">
<input 
type="text" 
id="workspace" 
placeholder=" " 
class="peer w-full bg-slate-950 border border-slate-800 rounded-xl px-4 pt-6 pb-2 text-sm text-white outline-none
focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all" 
required 
/>
<label 
for="workspace" 
class="absolute left-4 top-4 text-xs font-medium text-slate-500 transition-all duration-200 pointer-events-none
peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm peer-placeholder-shown:text-slate-500
peer-focus:top-1.5 peer-focus:text-[10px] peer-focus:text-emerald-400
peer-[:not(:placeholder-shown)]:top-1.5 peer-[:not(:placeholder-shown)]:text-[10px] peer-[:not(:placeholder-shown)]:text-emerald-400">
Nome do Workspace
</label>
</div>
</div>
</div>

🎯 Dica Pro: A Regra Sagrada da Ordem no DOM para o peer Funcionar!

O modificador peer baseia-se internamente no combinador CSS de irmãos subsequentes (~). Isso significa uma regra arquitetural inquebrável: o elemento marcado com a classe peer DEVE obrigatoriamente vir ANTES do elemento estilizado com peer-* no código HTML. O CSS tradicional não consegue estilizar um irmão anterior com base em um irmão posterior. Portanto, declare sempre o <input class="peer"> antes da <label class="peer-focus:..."> ou da mensagem de validação!

6. Ferramentas Correlatas da Rede Web-ZoneWare

Valide seus layouts reativos e consulte recursos práticos na suíte:

Playground Web IDE: Ambiente interativo para compor e simular seletores group e peer em tempo real.
Central do Desenvolvedor Web: Acesso a mais de 144 utilitários para depuração front-end.
Lição 18 de Tailwind CSS: Revise os estados interativos individuais (hover, focus e active).
Lição 22 do Curso de CSS: Compreenda a fundo o funcionamento dos combinadores descendentes e de irmãos no CSS puro.
Limpador e Formatador CSS: Valide e otimize regras de seletores combinados.

7. Links Oficiais e Documentação de Referência

Aprofunde-se na documentação internacional dos criadores do Tailwind:

🛠️ Laboratório Prático & Prática Imediata

Aplique o que você aprendeu nesta lição

Utilize nossas ferramentas online gratuitas para experimentar os conceitos ou teste o código ao vivo no Playground IDE.

💻 Desenvolvedor & Código

Editor de Códigos Web Online

Ambiente com destaque de sintaxe para você testar tags, tabelas e scripts na hora.

Abrir Ferramenta Online

⚡ Live Code Studio

Playground Web Online

Escreva seu código HTML, CSS ou JavaScript e veja o resultado renderizado ao vivo no navegador com zero configuração.

⚡ Codificar no Playground IDE