Exemplos do Tailwind
30 padrões de utilitários do Tailwind CSS comumente usados para tipografia, botões, cards, formulários e muito mais.
//
Busque em todas as páginas da documentação
30 padrões de utilitários do Tailwind CSS comumente usados para tipografia, botões, cards, formulários e muito mais.
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
Título principal para títulos de página e seções de herói.
<h1 className="text-4xl font-bold text-gray-900">
Bem-vindo à Nossa Plataforma
</h1>Notas: Use text-5xl ou text-6xl para títulos de herói ainda maiores. Combine com tracking-tight para um espaçamento entre letras mais apertado em textos grandes.
Título secundário para títulos de seção.
<h2 className="text-2xl font-semibold text-gray-700">
Começando
</h2>Notas: font-semibold (peso 600) é mais leve que font-bold (700) e funciona bem para subtítulos.
Texto de parágrafo padrão com altura de linha adequada.
<p className="text-base leading-relaxed text-gray-600">
Este é um parágrafo de texto do corpo com espaçamento de linha confortável para legibilidade.
</p>Notas: leading-relaxed (altura de linha 1.625) melhora a legibilidade. Use text-gray-600 ou text-gray-700 para texto do corpo em vez de preto puro.
Informações pequenas, legendas ou metadados.
<span className="text-sm text-gray-500">
Publicado em 15 de janeiro de 2024
</span>Notas: Use text-xs para texto ainda menor, como timestamps ou rótulos.
Botão principal de chamada para ação com estados de foco e ao passar o mouse.
<button className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Começar
</button>Notas: Inclua sempre estados de foco para acessibilidade. ring-offset-2 cria espaço entre o anel e a borda do botão.
Botão menos proeminente para ações secundárias.
<button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
Saiba Mais
</button>Notas: Use borda e um estado sutil ao passar o mouse em vez de cor de fundo sólida.
Botão de ação destrutiva (excluir, remover, etc.).
<button className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">
Excluir Conta
</button>Notas: Vermelho indica ações de perigo/destrutivas. Sempre confirme ações destrutivas em sua lógica.
Botão em estado desabilitado.
<button
disabled
className="cursor-not-allowed rounded-md bg-gray-300 px-4 py-2 text-sm font-medium text-gray-500"
>
Enviar
</button>Notas: cursor-not-allowed exibe o cursor de desabilitado ao passar o mouse. Use o atributo HTML disabled para acessibilidade.
Card básico com sombra e borda.
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
<h3 className="text-lg font-semibold">Título do Card</h3>
<p className="mt-2 text-gray-600">O conteúdo do card vai aqui.</p>
</div>Notas: shadow-sm fornece profundidade sutil. Use shadow-md ou shadow-lg para cards mais proeminentes.
Card interativo que se eleva ao passar o mouse.
<div className="cursor-pointer rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
<h3 className="text-lg font-semibold">Card Clicável</h3>
<p className="mt-2 text-gray-600">Passe o mouse para ver o efeito.</p>
</div>Notas: transition-shadow anima suavemente a mudança da sombra. Adicione cursor-pointer para indicar interatividade.
Campo de texto de formulário padrão.
<input
type="text"
placeholder="Digite seu nome"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
/>Notas: focus:ring-1 e focus:border-blue-500 fornecem feedback visual claro. w-full faz o campo preencher seu contêiner.
Campo de formulário com rótulo acima do campo.
<div className="space-y-1">
<label className="block text-sm font-medium text-gray-700">
Endereço de E-mail
</label>
<input
type="email"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
/>
</div>Notas: block faz o rótulo ocupar a largura total. space-y-1 adiciona espaçamento consistente entre o rótulo e o campo.
Campo inválido com mensagem de erro.
<div className="space-y-1">
<input
type="email"
className="w-full rounded-md border border-red-500 px-3 py-2 text-sm focus:border-red-500 focus:outline-none focus:ring-1 focus:ring-red-500"
/>
<p className="text-sm text-red-600">Por favor, insira um endereço de e-mail válido.</p>
</div>Notas: Borda e texto vermelhos indicam erro de validação. Sempre forneça mensagens de erro claras.
Campo de texto de múltiplas linhas.
<textarea
rows={4}
placeholder="Digite sua mensagem"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
></textarea>Notas: Use o atributo rows para controlar a altura. Mesmos estilos de foco do campo de texto para consistência.
Checkbox estilizado com rótulo.
<label className="flex items-center space-x-2">
<input
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
<span className="text-sm text-gray-700">Concordo com os termos</span>
</label>Notas: flex items-center alinha o checkbox e o rótulo. text-blue-600 colore o estado marcado.
Botão de rádio estilizado com rótulo.
<label className="flex items-center space-x-2">
<input
type="radio"
name="plan"
className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
/>
<span className="text-sm text-gray-700">Plano Básico</span>
</label>Notas: Botões de rádio devem sempre ter o mesmo atributo name para agrupamento.
Pequeno rótulo para status ou categorias.
<span className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800">
Novo
</span>Notas: rounded-full cria uma forma de pílula. Use diferentes combinações de cores para diferentes tipos de badges.
Caixa de mensagem informativa.
<div className="rounded-md bg-blue-50 p-4">
<p className="text-sm text-blue-700">
Sua conta foi verificada com sucesso.
</p>
</div>Notas: Fundo claro com texto mais escuro da mesma família de cores. Use border-l-4 border-blue-500 para adicionar uma faixa de destaque.
Caixa de mensagem de aviso.
<div className="rounded-md bg-yellow-50 p-4">
<p className="text-sm text-yellow-800">
Sua assinatura expira em 3 dias.
</p>
</div>Notas: Amarelo indica avisos ou notificações importantes que precisam de atenção.
Caixa de mensagem de erro.
<div className="rounded-md bg-red-50 p-4">
<p className="text-sm text-red-700">
Ocorreu um erro ao processar seu pagamento.
</p>
</div>Notas: Vermelho para erros e falhas. Sempre forneça informações acionáveis nas mensagens de erro.
Mensagem de confirmação de sucesso.
<div className="rounded-md bg-green-50 p-4">
<p className="text-sm text-green-700">
Suas alterações foram salvas com sucesso.
</p>
</div>Notas: Verde indica operações bem-sucedidas ou feedback positivo.
Hiperlink estilizado com efeito hover.
<a
href="/docs"
className="text-blue-600 underline decoration-1 underline-offset-2 hover:text-blue-800"
>
Leia a documentação
</a>Notas: underline-offset-2 adiciona espaço entre o texto e o sublinhado. decoration-1 torna o sublinhado mais fino.
Link sutil sem sublinhado.
<a
href="/about"
className="text-blue-600 hover:underline"
>
Saiba mais
</a>Notas: O sublinhado aparece apenas ao passar o mouse. Padrão comum em navegação e menus.
Separador de regra horizontal.
<hr className="my-8 border-t border-gray-200" />Notas: my-8 adiciona espaçamento vertical. Use cores de borda mais claras (gray-200 ou gray-300) para separação sutil.
Imagem de usuário circular.
<img
src="/avatar.jpg"
alt="Avatar do usuário"
className="h-10 w-10 rounded-full object-cover"
/>Notas: object-cover garante que a imagem preencha o círculo sem distorção. Use tamanhos consistentes em seu aplicativo.
Lista não ordenada estilizada.
<ul className="list-disc space-y-2 pl-5 text-gray-700">
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>Notas: space-y-2 adiciona espaçamento entre os itens. pl-5 indenta a lista.
Lista ordenada estilizada.
<ol className="list-decimal space-y-2 pl-5 text-gray-700">
<li>Instalar dependências</li>
<li>Configurar definições</li>
<li>Implantar aplicação</li>
</ol>Notas: Mesmo padrão de espaçamento das listas com marcadores para consistência visual.
Trecho de código em linha.
<p className="text-gray-700">
Execute <code className="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-sm text-pink-600">npm install</code> para começar.
</p>Notas: font-mono usa fonte monoespaçada. Fundo claro distingue o código do texto circundante.
Trecho de código de múltiplas linhas.
<pre className="overflow-x-auto rounded-lg bg-gray-900 p-4">
<code className="font-mono text-sm text-gray-100">
const greeting = "Olá, Mundo!";{"\n"}
console.log(greeting);
</code>
</pre>Notas: overflow-x-auto habilita a rolagem horizontal para linhas longas. Fundo escuro é comum para blocos de código.
Texto exibido ao passar o mouse (tooltip apenas com CSS).
<div className="group relative inline-block">
<button className="text-blue-600 underline decoration-dotted">
Passe o mouse aqui
</button>
<span className="invisible absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded bg-gray-900 px-2 py-1 text-xs text-white opacity-0 transition-opacity group-hover:visible group-hover:opacity-100">
Este é um tooltip
</span>
</div>Notas: Usa group e group-hover: para tooltip puramente em CSS. whitespace-nowrap impede a quebra de texto. Para tooltips complexos, considere uma biblioteca como Radix UI ou Headless UI.
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥