Tailwind 4 skill

O que ela faz

A skill é o guia de estilo que o time do Prowler usa com Tailwind CSS 4 em componentes React. Começa por uma árvore de decisão: se a classe existe, vai no className; valor que muda na hora vai no style; estilo condicional usa a função cn(); e biblioteca que não aceita classe recebe constantes com variáveis CSS.

Duas coisas são proibidas: var() dentro do className e cor em hexadecimal na classe. A cor vem sempre de uma classe do Tailwind ou do tema, como text-slate-400 ou bg-primary, e valor arbitrário fica pra medidas pontuais.

Traz a função cn(), feita com clsx e tailwind-merge, e mostra quando usar e quando é exagero. Fecha com exemplos de flex, grid, espaçamento, tipografia, bordas, hover e foco, telas responsivas, modo escuro e cores pra gráficos do Recharts.

Nas palavras de quem fez

Quando usar

• Criar componentes novos num projeto React com Tailwind 4
• Limpar cores em hexadecimal espalhadas pelo código
• Montar botões com variantes e estado desabilitado
• Pôr as cores do tema em gráficos que não aceitam classe
• Deixar a tela responsiva e com modo escuro

Depois de instalar, é só pedir assim

• Cria um componente de botão com variantes primária e secundária e estado desabilitado, usando cn()
• Revisa esses componentes e troca as cores em hexadecimal pelas classes do tema
• Ajusta esse gráfico do Recharts pra usar as cores do tema em vez de cor fixa

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