De CSS responsivo para Tailwind
@media (min-width: 768px) → md:. 1024px → lg:. Consultas complexas pedem revisão.
As media queries por largura mínima encaixam bem nos prefixos do Tailwind: 768px corresponde a md: e 1024px a lg:. O atrito surge com max-width, porque o Tailwind parte do ecrã pequeno e acrescenta estilos para cima. Consultas combinadas ou por intervalos raramente se convertem sozinhas e pedem reescrita manual.
Prefixos md: e lg:
Media queries alinhadas aos breakpoints por omissão tornam-se md: / lg:. Breakpoints raros precisam de nota ou CSS.
Mobile-first
Tailwind assume base móvel e sobe. Inverta mentalmente se o CSS era desktop-first.
Uma propriedade, um prefixo
Mude uma largura de cada vez no exemplo Responsive para ver que nota aparece.
Experimentar
.example { display: flex; gap: 1rem; padding: 1rem; }Nota de confiança: verifique o resultado visualmente. O conversor é um rascunho para developers.