Tailwind CSS skill

O que ela faz

Orienta o Claude a mexer em estilo feito com Tailwind CSS na versão 4: adicionar ou corrigir classes, configurar, migrar de versão e usar extensões como tailwind-variants e tw-animate-css. A regra de ouro é seguir o que o projeto já usa: a versão instalada, as cores, os componentes e o jeito das telas vizinhas.

Não instala pacote, não muda a integração e não migra versão sem pedido. Não redesenha além do que foi pedido e preserva o comportamento no celular, no modo escuro, na acessibilidade e ao passar o mouse. Escreve as classes inteiras, sem montar nome por pedaço, que o Tailwind não enxerga.

No fim, roda a build quando mexe na configuração e olha a tela renderizada: numa largura só se o ajuste é pequeno; em celular, tela larga e tema escuro se mexeu em estilo compartilhado. Entrega um resumo do que mudou e do que conferiu.

Nas palavras de quem fez

Quando usar

• Ajustar espaçamento, cor ou tamanho de texto numa landing page feita com Tailwind
• Corrigir um botão que some ou fica ilegível no modo escuro
• Migrar um site do Tailwind 3 pro 4 quando decidir dar esse passo
• Criar variações de um componente, como botão principal e secundário, sem repetir classe

Depois de instalar, é só pedir assim

• Aumenta o respiro entre as seções da home e confere no celular e no computador
• O botão de comprar fica apagado no modo escuro, corrige mantendo as cores do site
• Migra esse projeto do Tailwind 3 pro 4 e me mostra o que mudou

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas