Como usar CSS para classes Tailwind
Adam Wathan lançou o Tailwind CSS em 2017 — primeiro como um artigo controverso chamado 'CSS Utility Classes and Separation of Concerns' em seu blog, depois como biblioteca real. A recepção foi dividida. Uma parte da comunidade CSS recusou a ideia com veemência: isso era CSS inline disfarçado, violação da separação de responsabilidades, templates que virariam uma bagunça ilegível de classes. Wathan respondeu cada objeção com argumentos práticos sobre manutenção em escala, e o tempo deu razão a ele. Entre 2022 e 2024, o Tailwind se tornou a ferramenta de CSS mais usada do mundo segundo a pesquisa State of CSS — com adoção por empresas como GitHub, Shopify e Vercel.
A filosofia central é inverter o modelo mental do CSS. Em vez de criar classes semânticas como `.botao-primario` que encapsulam propriedades, você compõe estilos diretamente no HTML com classes atômicas: `bg-blue-500 text-white px-4 py-2 rounded`. Parece prolixo à primeira vista. Na prática, significa que você nunca precisa inventar nomes de classes (o trabalho mais subestimado do CSS), o arquivo CSS de produção tem tipicamente entre 5 KB e 20 KB graças ao compilador JIT, e modificar o estilo de um elemento nunca afeta outros elementos inesperadamente.
Esta ferramenta de conversão faz o mapeamento heurístico de declarações CSS comuns para classes Tailwind equivalentes. Ela lê `property: value` (com ou sem blocos `{}`), ignora comentários e sugere utilitários como `flex`, `justify-center`, escalas de espaçamento (`p-4`, `gap-6`) ou valores arbitrários (`[margin:12px]`). O resultado é um ponto de partida — breakpoints (`sm:`, `md:`), estados como `hover:` e variantes como `dark:` precisam ser adicionados manualmente, porque dependem do contexto de design do seu projeto.
Exemplo
display: flex;
justify-content: center;
padding: 16px;Perguntas frequentes
Para que serve esta ferramenta?
Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
Meus dados são enviados a algum servidor?
O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
Posso usar em produção ou para dados reais?
Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.