EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Tailwind CSS Estados Interativos: Prefixos de Estado hover/focus/active e Estilos de Cursor

Visão Geral dos Prefixos de Estado

O Tailwind usa prefixos de estado para aplicar estilos a elementos em diferentes estados sem escrever CSS de pseudo-classe.

Prefixo Pseudo-classe CSS Descrição
hover: :hover Hover do mouse
focus: :focus Focado
active: :active Mouse pressionado
disabled: :disabled Estado desabilitado
visited: :visited Link visitado
first: :first-child Primeiro elemento filho
last: :last-child Último elemento filho
odd: :nth-child(odd) Elemento filho ímpar
even: :nth-child(even) Elemento filho par

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Prefixos de Estado</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- estado hover -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">estado hover</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition-colors">
          Escurecer ao passar o mouse
        </button>
        <button class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors">
          Borda ao passar o mouse
        </button>
        <button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:shadow-lg hover:shadow-green-500/50 transition-all">
          Sombra ao passar o mouse
        </button>
      </div>
    </div>

    <!-- estado focus -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">estado focus</h3>
      <div class="space-y-4">
        <input type="text" placeholder="Clique no input para ver o efeito de foco"
               class="w-full p-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-none transition-all">
        <input type="text" placeholder="Sombra de foco personalizada"
               class="w-full p-3 border border-gray-300 rounded-lg focus:shadow-lg focus:shadow-purple-500/30 focus:border-purple-500 focus:outline-none transition-all">
      </div>
    </div>

    <!-- estado active -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">estado active</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 active:bg-blue-800 active:scale-95 transition-all">
          Escurecer e reduzir ao pressionar
        </button>
        <button class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 active:bg-gray-100 active:scale-95 transition-all">
          Efeito ao pressionar
        </button>
      </div>
    </div>

    <!-- estado disabled -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">estado disabled</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
          Botão habilitado
        </button>
        <button disabled class="px-6 py-3 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
          Botão desabilitado
        </button>
        <input type="text" placeholder="Input habilitado"
               class="p-3 border border-gray-300 rounded-lg disabled:bg-gray-100 disabled:cursor-not-allowed">
        <input type="text" disabled placeholder="Input desabilitado"
               class="p-3 border border-gray-300 rounded-lg disabled:bg-gray-100 disabled:cursor-not-allowed">
      </div>
    </div>

    <!-- links visitados -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">links visitados</h3>
      <div class="flex gap-4">
        <a href="#visited1" class="text-blue-600 hover:text-blue-800 visited:text-purple-600">
          Fica roxo após clicar
        </a>
        <a href="#visited2" class="text-green-600 hover:text-green-800 visited:text-gray-400">
          Fica cinza após clicar
        </a>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever regras de pseudo-classe como button:hover { background-color: ... }, enquanto o Tailwind usa prefixos como hover:bg-blue-700 para declará-los diretamente.

💡 Dica: Os prefixos de estado podem ser combinados, como hover:focus:ring-2 para aplicar estilos quando o elemento está com hover e foco ao mesmo tempo.

Pseudo-classes Estruturais (first/last/odd/even)

Os prefixos de pseudo-classes estruturais são usados para selecionar elementos filhos em posições específicas.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Pseudo-classes Estruturais</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- first/last -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">first/last</h3>
      <ul class="space-y-2">
        <li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">
          Primeiro item (first:bg-blue-50)
        </li>
        <li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">
          Segundo item
        </li>
        <li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">
          Terceiro item
        </li>
        <li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">
          Último item (last:bg-green-50)
        </li>
      </ul>
    </div>

    <!-- odd/even -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">odd/even</h3>
      <ul class="space-y-0">
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">Linha 1 (odd:bg-white)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">Linha 2 (even:bg-gray-50)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">Linha 3 (odd:bg-white)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">Linha 4 (even:bg-gray-50)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50 border-b">Linha 5 (odd:bg-white)</li>
        <li class="p-3 odd:bg-white even:bg-gray-50">Linha 6 (even:bg-gray-50)</li>
      </ul>
    </div>

    <!-- Exemplo de tabela -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Listras zebradas na tabela</h3>
      <table class="w-full">
        <thead>
          <tr class="bg-gray-100">
            <th class="p-3 text-left">Nome</th>
            <th class="p-3 text-left">Email</th>
            <th class="p-3 text-left">Função</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">Alice</td>
            <td class="p-3">alice@exemplo.com</td>
            <td class="p-3">Admin</td>
          </tr>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">Bob</td>
            <td class="p-3">bob@exemplo.com</td>
            <td class="p-3">Editor</td>
          </tr>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">Charlie</td>
            <td class="p-3">charlie@exemplo.com</td>
            <td class="p-3">Usuário</td>
          </tr>
          <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
            <td class="p-3">Diana</td>
            <td class="p-3">diana@exemplo.com</td>
            <td class="p-3">Usuário</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever seletores como li:first-child { ... } ou tr:nth-child(even) { ... }, enquanto o Tailwind usa prefixos como first:bg-blue-50 e even:bg-gray-50 para declará-los diretamente.

group-hover e peer

group-hover: e peer são usados para lidar com estados interativos entre elementos pais-filhos ou elementos irmãos.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de group-hover e peer</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- group-hover hover pai-filho -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">group-hover hover pai-filho</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="group bg-gray-50 rounded-lg p-4 cursor-pointer transition-all hover:shadow-lg">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3 group-hover:bg-blue-500 transition-colors">
            <span class="text-blue-500 group-hover:text-white transition-colors">🎨</span>
          </div>
          <h4 class="font-semibold group-hover:text-blue-600 transition-colors">Ferramentas de Design</h4>
          <p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">Passe o mouse sobre o elemento pai para ver o efeito</p>
        </div>
        <div class="group bg-gray-50 rounded-lg p-4 cursor-pointer transition-all hover:shadow-lg">
          <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3 group-hover:bg-green-500 transition-colors">
            <span class="text-green-500 group-hover:text-white transition-colors">⚡</span>
          </div>
          <h4 class="font-semibold group-hover:text-green-600 transition-colors">Desempenho</h4>
          <p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">Passe o mouse sobre o elemento pai para ver o efeito</p>
        </div>
        <div class="group bg-gray-50 rounded-lg p-4 cursor-pointer transition-all hover:shadow-lg">
          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3 group-hover:bg-purple-500 transition-colors">
            <span class="text-purple-500 group-hover:text-white transition-colors">🔒</span>
          </div>
          <h4 class="font-semibold group-hover:text-purple-600 transition-colors">Segurança</h4>
          <p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">Passe o mouse sobre o elemento pai para ver o efeito</p>
        </div>
      </div>
    </div>

    <!-- uso combinado de group -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">uso combinado de group</h3>
      <div class="space-y-4">
        <div class="group flex items-center gap-4 p-4 bg-gray-50 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer">
          <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-500 transition-colors">
            <svg class="w-5 h-5 text-blue-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </div>
          <div class="flex-1">
            <h4 class="font-medium group-hover:text-blue-600 transition-colors">Item do menu 1</h4>
            <p class="text-sm text-gray-500 group-hover:text-blue-400 transition-colors">Texto de descrição</p>
          </div>
          <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </div>

        <div class="group flex items-center gap-4 p-4 bg-gray-50 rounded-lg hover:bg-green-50 transition-colors cursor-pointer">
          <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center group-hover:bg-green-500 transition-colors">
            <svg class="w-5 h-5 text-green-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </div>
          <div class="flex-1">
            <h4 class="font-medium group-hover:text-green-600 transition-colors">Item do menu 2</h4>
            <p class="text-sm text-gray-500 group-hover:text-green-400 transition-colors">Texto de descrição</p>
          </div>
          <svg class="w-5 h-5 text-gray-400 group-hover:text-green-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- peer elementos irmãos -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">peer elementos irmãos</h3>
      <div class="space-y-4">
        <div>
          <input type="email" id="email" placeholder=" "
                 class="peer w-full p-3 pt-5 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-none transition-all">
          <label for="email"
                 class="absolute left-3 top-1 text-gray-400 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-base peer-focus:top-1 peer-focus:text-sm peer-focus:text-blue-500">
            Endereço de email
          </label>
        </div>
        <div class="relative">
          <input type="password" id="password" placeholder=" "
                 class="peer w-full p-3 pt-5 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-500/50 focus:outline-none transition-all">
          <label for="password"
                 class="absolute left-3 top-1 text-gray-400 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-base peer-focus:top-1 peer-focus:text-sm peer-focus:text-purple-500">
            Senha
          </label>
        </div>
        <div class="flex items-center gap-3">
          <input type="checkbox" id="agree" class="peer sr-only">
          <label for="agree"
                 class="w-5 h-5 border-2 border-gray-300 rounded peer-checked:bg-blue-500 peer-checked:border-blue-500 cursor-pointer transition-colors flex items-center justify-center">
            <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
            </svg>
          </label>
          <span class="text-gray-700">Concordo com os termos de serviço</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente
💡 Dica: Adicione a classe group a um elemento pai e use o prefixo group-hover: nos elementos filhos. Adicione a classe peer a um elemento irmão anterior e use prefixos como peer-focus: nos elementos irmãos subsequentes.

Estilos de Cursor (cursor-*)

As classes cursor-* controlam o estilo do cursor quando o mouse passa sobre um elemento.

Classe Valor CSS Descrição
cursor-auto cursor: auto Automático (padrão)
cursor-default cursor: default Seta padrão
cursor-pointer cursor: pointer Mão (ponteiro)
cursor-wait cursor: wait Aguardar
cursor-text cursor: text Seleção de texto
cursor-move cursor: move Mover
cursor-not-allowed cursor: not-allowed Não permitido
cursor-grab cursor: grab Agarrar
cursor-grabbing cursor: grabbing Agarrando
cursor-crosshair cursor: crosshair Mira
cursor-zoom-in cursor: zoom-in Ampliar
cursor-zoom-out cursor: zoom-out Reduzir

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Estilos de Cursor</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Estilos de Cursor</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-auto">
          <div class="text-2xl mb-2">👆</div>
          <div class="text-sm">cursor-auto</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-default">
          <div class="text-2xl mb-2">👆</div>
          <div class="text-sm">cursor-default</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-pointer">
          <div class="text-2xl mb-2">👆</div>
          <div class="text-sm">cursor-pointer</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-wait">
          <div class="text-2xl mb-2">⏳</div>
          <div class="text-sm">cursor-wait</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-text">
          <div class="text-2xl mb-2">📝</div>
          <div class="text-sm">cursor-text</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-move">
          <div class="text-2xl mb-2">✋</div>
          <div class="text-sm">cursor-move</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-not-allowed">
          <div class="text-2xl mb-2">🚫</div>
          <div class="text-sm">cursor-not-allowed</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-grab">
          <div class="text-2xl mb-2">✊</div>
          <div class="text-sm">cursor-grab</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-grabbing">
          <div class="text-2xl mb-2">✊</div>
          <div class="text-sm">cursor-grabbing</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-crosshair">
          <div class="text-2xl mb-2">➕</div>
          <div class="text-sm">cursor-crosshair</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-zoom-in">
          <div class="text-2xl mb-2">🔍</div>
          <div class="text-sm">cursor-zoom-in</div>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg text-center cursor-zoom-out">
          <div class="text-2xl mb-2">🔍</div>
          <div class="text-sm">cursor-zoom-out</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever propriedades CSS como cursor: pointer, enquanto o Tailwind usa nomes de classe como cursor-pointer para declará-los diretamente.

Controle de Seleção (select-*)

As classes select-* controlam se os usuários podem selecionar texto.

Classe Valor CSS Descrição
select-none user-select: none Não selecionável
select-text user-select: text Selecionável (padrão)
select-all user-select: all Clique para selecionar tudo
select-auto user-select: auto Automático

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Controle de Seleção</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Controle de Seleção</h3>
      <div class="space-y-4">
        <div class="p-4 bg-gray-50 rounded-lg">
          <p class="text-sm text-gray-500 mb-2">select-none: Não selecionável</p>
          <p class="select-none">Este texto não pode ser selecionado, ideal para botões, rótulos e outros elementos interativos.</p>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg">
          <p class="text-sm text-gray-500 mb-2">select-text: Selecionável (padrão)</p>
          <p class="select-text">Este texto pode ser selecionado, ideal para conteúdo do corpo.</p>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg">
          <p class="text-sm text-gray-500 mb-2">select-all: Clique para selecionar tudo</p>
          <p class="select-all bg-blue-50 p-2 rounded font-mono">const apiKey = "abc123";</p>
        </div>
      </div>
    </div>

    <!-- Aplicação prática -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Aplicação Prática</h3>
      <div class="space-y-4">
        <!-- Bloco de código -->
        <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm select-all">
          npm install tailwindcss
        </div>
        <!-- Texto do botão não selecionável -->
        <div class="flex gap-4">
          <button class="px-6 py-3 bg-blue-500 text-white rounded-lg select-none cursor-pointer hover:bg-blue-600">
            Texto do botão não selecionável
          </button>
          <button class="px-6 py-3 bg-green-500 text-white rounded-lg select-none cursor-pointer hover:bg-green-600">
            Confirmar Envio
          </button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente
💡 Dica: select-none é comumente usado para botões, rótulos e outros elementos onde a seleção de texto é desnecessária. select-all é comumente usado para blocos de código e linhas de comando onde se deseja cópia com um clique.

Controle de Redimensionamento (resize-*)

As classes resize-* controlam se um elemento pode ser redimensionado.

Classe Valor CSS Descrição
resize-none resize: none Não redimensionável
resize-y resize: vertical Redimensionamento vertical apenas
resize-x resize: horizontal Redimensionamento horizontal apenas
resize resize: both Redimensionável

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Controle de Redimensionamento</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Controle de Redimensionamento</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-none: Não redimensionável</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize-none h-24 focus:outline-none focus:border-blue-500"
                    placeholder="Área de texto não redimensionável"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-y: Redimensionamento vertical apenas</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize-y h-24 focus:outline-none focus:border-blue-500"
                    placeholder="Área de texto redimensionável verticalmente"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-x: Redimensionamento horizontal apenas</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize-x h-24 focus:outline-none focus:border-blue-500"
                    placeholder="Área de texto redimensionável horizontalmente"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize: Redimensionável</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize h-24 focus:outline-none focus:border-blue-500"
                    placeholder="Área de texto redimensionável livremente"></textarea>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever propriedades CSS como resize: vertical, enquanto o Tailwind usa nomes de classe como resize-y para declará-los diretamente.

Comportamento de Rolagem (scroll-*)

As classes scroll-* controlam o comportamento de rolagem.

Classe Valor CSS Descrição
scroll-auto scroll-behavior: auto Automático (padrão)
scroll-smooth scroll-behavior: smooth Rolagem suave
snap-start scroll-snap-align: start Alinhar ao início
snap-center scroll-snap-align: center Alinhar ao centro
snap-end scroll-snap-align: end Alinhar ao final
snap-none scroll-snap-type: none Sem encaixe
snap-x scroll-snap-type: x mandatory Encaixe horizontal
snap-y scroll-snap-type: y mandatory Encaixe vertical

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Comportamento de Rolagem</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Rolagem suave -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Rolagem Suave</h3>
      <div class="flex gap-4 mb-4">
        <a href="#section1" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">Ir para Seção 1</a>
        <a href="#section2" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">Ir para Seção 2</a>
        <a href="#section3" class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600">Ir para Seção 3</a>
      </div>
      <div class="h-48 overflow-y-auto scroll-smooth border rounded-lg">
        <div id="section1" class="p-4 bg-blue-50 h-48 flex items-center justify-center">
          <h4 class="text-xl font-bold text-blue-700">Seção 1</h4>
        </div>
        <div id="section2" class="p-4 bg-green-50 h-48 flex items-center justify-center">
          <h4 class="text-xl font-bold text-green-700">Seção 2</h4>
        </div>
        <div id="section3" class="p-4 bg-purple-50 h-48 flex items-center justify-center">
          <h4 class="text-xl font-bold text-purple-700">Seção 3</h4>
        </div>
      </div>
    </div>

    <!-- Encaixe de rolagem -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Encaixe de Rolagem</h3>
      <div class="flex overflow-x-auto snap-x snap-mandatory gap-4 pb-4">
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-blue-100 rounded-lg flex items-center justify-center">
          <span class="text-blue-700 font-semibold">Cartão 1</span>
        </div>
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-green-100 rounded-lg flex items-center justify-center">
          <span class="text-green-700 font-semibold">Cartão 2</span>
        </div>
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-purple-100 rounded-lg flex items-center justify-center">
          <span class="text-purple-700 font-semibold">Cartão 3</span>
        </div>
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-orange-100 rounded-lg flex items-center justify-center">
          <span class="text-orange-700 font-semibold">Cartão 4</span>
        </div>
        <div class="snap-center flex-shrink-0 w-64 h-40 bg-red-100 rounded-lg flex items-center justify-center">
          <span class="text-red-700 font-semibold">Cartão 5</span>
        </div>
      </div>
    </div>

    <!-- Barra de rolagem oculta -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Barra de Rolagem Oculta</h3>
      <div class="flex overflow-x-auto scrollbar-hide gap-4 pb-4">
        <div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center text-white">
          Barra de rolagem oculta
        </div>
        <div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center text-white">
          Usando scrollbar-hide
        </div>
        <div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center text-white">
          Rolagem horizontal
        </div>
        <div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-orange-400 to-orange-600 rounded-lg flex items-center justify-center text-white">
          Continue rolando
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente
💡 Dica: Adicionar scroll-smooth ao elemento <html> habilita a rolagem suave para toda a página. Combinar snap-x snap-mandatory com snap-center cria um efeito de carrossel.

❓ Perguntas Frequentes

P: Qual a diferença entre group-hover e hover? R: hover: é o estado de hover do próprio elemento. group-hover: aplica estilos aos elementos filhos quando o elemento pai (com a classe group) está com hover. É ideal para efeitos de hover coordenados entre elementos pais e filhos.

P: Como o peer funciona? R: Adicione a classe peer a um elemento e use prefixos como peer-focus: e peer-valid: para estilizar elementos irmãos subsequentes. Comumente usado para rótulos flutuantes e validação de formulários.

P: Por que disabled:opacity-50 não está funcionando? R: Certifique-se de que o prefixo disabled: está sendo usado com o atributo disabled real. O Tailwind gera o seletor .disabled\:opacity-50:disabled, então o elemento deve ter o atributo disabled para que o efeito seja aplicado.

P: Como implementar encaixe de rolagem? R: Adicione snap-x snap-mandatory (horizontal) ou snap-y snap-mandatory (vertical) ao contêiner de rolagem e adicione snap-center ou snap-start aos elementos filhos.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um componente de botão usando os prefixos de estado hover:, focus:, active: e disabled: para implementar estilização completa de estados interativos

  2. ⭐⭐ Crie um menu de navegação usando group e group-hover: para implementar mudanças de hover coordenadas para ícones, texto e setas

  3. ⭐⭐⭐ Crie um formulário usando peer e peer-focus: para implementar efeitos de rótulo flutuante, combinado com estados focus: e invalid: para estilização de validação de formulário

100%