Instalação e configuração

A instalação do Tailwind cabe em três comandos e, mesmo assim, é a etapa em que mais se perde tempo. O cenário é sempre o mesmo: tudo funciona em desenvolvimento, você faz o deploy e metade dos estilos desaparece em produção. Ou então uma cor definida na configuração continua sendo ignorada, teimosamente. Ou ainda o autocompletar não sugere nada e você digita text-grey-500 por vinte minutos antes de perceber que a paleta se escreve gray.

Esses três sintomas têm a mesma origem: o Tailwind só conhece as classes que ele viu escritas por extenso nos seus arquivos-fonte. Ele não é um motor que interpreta sua aplicação em tempo de execução, e sim uma ferramenta que lê texto na compilação. Enquanto esse modelo não estiver claro, cada incidente parece magia negra. Quando estiver, três quartos dos problemas de instalação se diagnosticam em dez segundos.

Configuração em um projeto Vite

É o caso mais comum e o mais rápido, seja seu projeto em React, Vue, Svelte ou Astro. Dois pacotes, um plugin, uma linha de CSS.

npm install tailwindcss @tailwindcss/vite