Tailwind V4 Shadcn skill

O que ela faz

Traz um passo a passo testado em produção pra montar Tailwind CSS v4 com shadcn/ui num projeto Vite com React: instalar os pacotes, ligar o plugin @tailwindcss/vite, deixar vazio o campo config do components.json e apagar o tailwind.config.ts, que o v4 não usa.

Organiza o tema em quatro passos: as cores em variáveis no :root e no .dark com hsl(), o bloco @theme inline que vira classes como bg-primary, os estilos de base e o modo escuro automático. Inclui o ThemeProvider, o botão de trocar tema e cores de erro, sucesso, aviso e informação.

Tem uma tabela de sintoma e correção, como cor toda preta ou branca por hsl() duplicado, arquivos modelo prontos e guias à parte pra migrar do v3, usar os plugins de tipografia e de formulário e criar cores próprias da marca.

Nas palavras de quem fez

Quando usar

• Começar um projeto React novo com Tailwind v4 e shadcn/ui
• Pôr modo escuro com botão de trocar o tema
• Resolver classe bg-primary que não funciona ou tema que não troca
• Migrar um projeto do Tailwind v3 pro v4
• Pôr a cor da marca como cor do tema

Depois de instalar, é só pedir assim

• Cria um projeto Vite com React, Tailwind v4 e shadcn/ui seguindo a skill tailwind-v4-shadcn
• O modo escuro do meu site não troca e as cores ficaram todas pretas, descobre o motivo
• Põe o roxo da minha marca no tema e usa nos botões

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