Tailwind V4 skill

O que ela faz

A skill reúne o jeito certo de usar o Tailwind CSS v4, que trocou o tailwind.config.js por configuração no próprio CSS. O Claude liga o plugin @tailwindcss/vite, importa o Tailwind no CSS de entrada e define cores, fontes, espaçamentos, breakpoints e animações da marca dentro de um bloco @theme.

Ela explica quando usar cada modo do @theme (padrão, inline e reference), como escrever cores em OKLCH, que mantêm o brilho parecido entre tons diferentes, e como montar duas camadas de variáveis: as cores de base e os nomes de uso, como primary e surface. Traz guias à parte de instalação, tema e modo escuro.

Antes de mexer em cor ou token, a skill manda conferir se o projeto está mesmo no Tailwind 4: plugin do Vite ligado, versão 4 no package.json e tema no CSS. Se o tema ainda vem de um tailwind.config.js da versão 3, o Claude acerta a instalação primeiro.

Nas palavras de quem fez

Quando usar

• Começar um site ou app novo com Tailwind 4 e Vite
• Pôr as cores e as fontes da sua marca no tema
• Montar o modo escuro do site
• Passar o tema de um projeto do Tailwind 3 pro 4

Depois de instalar, é só pedir assim

• Configura o Tailwind 4 nesse projeto Vite e cria o tema com as cores da minha marca em OKLCH
• Adiciona modo escuro no site usando o Tailwind 4
• Esse projeto ainda usa tailwind.config.js. Passa o tema pro @theme do Tailwind 4

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