Ferramentas
Tailwind CSS
Framework CSS de classes utilitárias para montar interfaces direto no HTML, com CSS final enxuto. Para devs front-end e quem cria sites e apps.
Em vez de criar uma folha de estilo e inventar nomes de classe, no Tailwind CSS você aplica o visual direto na marcação. Ele traz classes pequenas como flex, pt-4, text-center e rotate-90, que você combina no próprio HTML até chegar no design. Quem já conhece CSS reconhece cada propriedade, só que escrita como classe.
Para que serve
- Compor telas sem sair do arquivo HTML ou do componente, combinando classes de layout, espaçamento, cor e tipografia.
- Adaptar a página a cada tamanho de tela colocando um prefixo como
md:oulg:antes de qualquer classe. - Ativar o modo escuro com o prefixo
dark:nas cores. - Definir as cores e medidas do projeto como variáveis CSS dentro de
@theme. - Entregar um CSS pequeno em produção, porque o build remove as classes que o projeto não usa.
Como começar
A documentação oficial lista cinco caminhos: plugin do Vite, PostCSS, a CLI do Tailwind, guias por framework e o Play CDN. No Vite, a instalação é esta:
npm install tailwindcss @tailwindcss/viteDepois você adiciona o plugin tailwindcss() no vite.config.ts, coloca @import "tailwindcss"; no arquivo CSS principal e roda npm run dev. A partir daí as classes já funcionam nos arquivos do projeto.
Licença e custo
O framework usa licença MIT. Você pode aplicar em site de cliente, produto pago ou sistema interno, com a única exigência de manter o aviso de copyright. A instalação não pede conta nem chave. A mesma equipe mantém o Tailwind Plus, um produto à parte com componentes e templates de interface, acessado com login próprio.
Quando vale a pena
Projetos em Laravel, SvelteKit, Nuxt ou React Router, que a documentação cita no guia do Vite, ganham velocidade, porque o estilo fica junto da marcação e o design segue a mesma escala de espaços e cores. Para quem ainda está aprendendo CSS, vale entender primeiro as propriedades puras, já que cada classe do Tailwind é um atalho para elas. Em páginas pequenas, um arquivo CSS comum resolve sem etapa de build. Bootstrap é a alternativa mais lembrada para quem prefere outro estilo de framework CSS.