Tailwindcss skill

O Claude estiliza suas páginas com o Tailwind v4 do jeito atual, com o tema da sua marca, versão de celular e modo escuro, sem cair na sintaxe da versão 3.

por hairyf

instalações: 3.600
estrelas no GitHub: 26
No skills.sh desde: janeiro de 2026
Licença: MIT

Atualizada no GitHub em 14 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

hairyf
tailwindcss
O Claude estiliza suas páginas com o Tailwind v4 do jeito atual, com o tema da sua marca, versão de celular e modo escuro, sem cair na sintaxe da versão 3.Auditada3.600 instalações, grátis

O que ela faz

A skill traz a documentação do Tailwind CSS v4.1.18 quebrada em dezenas de referências curtas, uma por assunto: instalação, layout com flex e grid, espaçamento, tipografia, cores, bordas, sombras, animação, formulários e rolagem. O Claude abre só o arquivo do assunto que precisa na hora.

Ela segue o jeito da versão 4: tema definido no próprio CSS com @theme, em vez do arquivo de configuração em JavaScript, layout pensado primeiro pro celular, classes escritas por inteiro (nada de montar nome de classe com variável) e variantes pra estado, tamanho de tela e modo escuro.

Também tem o guia de migração da versão 3 pra 4, com o que mudou de nome e o que quebrou, e as regras pra criar classes e variantes próprias quando as prontas não bastam.

Nas palavras de quem fez

Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems…

hairyf, no SKILL.md

Quando usar

Montar uma landing page com Tailwind e deixar boa no celular
Criar o tema da marca com cores e fontes próprias
Colocar modo escuro num site que já usa Tailwind
Migrar um projeto do Tailwind 3 pro 4
Arrumar layout que quebra entre o celular e o computador

Depois de instalar, é só pedir assim

Cria o tema do meu site no Tailwind com o roxo e o amarelo da marca e a fonte Inter
Deixa essa página de vendas responsiva e com modo escuro
Migra este projeto do Tailwind 3 pro 4 e me diz 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

Como instalar a Tailwindcss no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Tailwindcss, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a tailwindcss precisa pra funcionar?

Só de um projeto que use ou vá usar Tailwind CSS. A skill é texto de referência: não pede chave, conta nem programa extra. Como instalar o Tailwind no projeto (Vite, PostCSS, CLI ou CDN) está numa das referências.

Ela serve pro Tailwind 3?

Ela foi feita a partir da documentação da versão 4.1. Pra quem ainda está na 3, o que mais ajuda é o guia de migração; os exemplos seguem a sintaxe nova.

Roda no Codex e no Antigravity?

Roda: são arquivos de texto no formato SKILL.md, sem script. Qualquer agente que leia skills consegue abrir as referências.

Levar essa skill

1x tailwindcssR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/hairyf/skills

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.