Guias
Guias práticos para converter conceitos CSS em utilitários Tailwind.
- CSS versus Tailwind — CSS clássico destaca-se em seletores complexos e animações. Tailwind coloca decisões visuais junto do markup. A maioria das equipas usa ambos.
- Do espaçamento CSS para Tailwind — padding: 1.5rem torna-se p-6. Atalhos expandem-se para lados. Fora da escala: p-[13px].
- Da tipografia CSS para Tailwind — font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. Cor usa text-*.
- De CSS Flexbox para Tailwind — display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
- De CSS Grid para Tailwind — grid-template-columns: repeat(3, 1fr) → grid-cols-3. Tracks personalizados usam valores arbitrários.
- Das cores CSS para Tailwind — Hex conhecidos mapeiam para text-gray-900. Desconhecidos: bg-[#1a2b3c].
- Das bordas CSS para Tailwind — border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
- De CSS responsivo para Tailwind — @media (min-width: 768px) → md:. 1024px → lg:. Consultas complexas pedem revisão.
- Das sombras CSS para Tailwind — Elevações comuns → shadow / shadow-lg. Sombras únicas → valores arbitrários.
- Do posicionamento CSS para Tailwind — position:absolute → absolute. Lados mapeiam para top/right/bottom/left. z-index custom → arbitrário.
- Estratégias de migração de CSS — Prefira migração incremental: novos componentes em Tailwind, depois caminhos quentes, CSS legado até substituir.
Extensão do Chrome
Converta CSS no painel lateral do Chrome
Instale a extensão gratuita CSS to Tailwind: cole CSS, converta localmente e copie utilitários sem sair da página em que está.