De CSS responsive a Tailwind
@media (min-width: 768px) → md:. 1024px → lg:. Las consultas complejas requieren revisión.
Las media queries por ancho mínimo se alinean bien con los prefijos de Tailwind: 768px corresponde a md: y 1024px a lg:. El desajuste aparece con max-width, porque Tailwind parte del móvil y acumula estilos hacia arriba. Las consultas combinadas o con rangos rara vez se traducen solas y conviene reescribirlas a mano.
Prefijos md: y lg:
Media queries alineadas a breakpoints por defecto se vuelven md: / lg:. Breakpoints raros necesitan nota o CSS.
Mobile-first
Tailwind asume base móvil y escala hacia arriba. Invierte mentalmente si tu CSS era desktop-first.
Una propiedad, un prefijo
Cambia un ancho a la vez en el playground Responsive para ver qué nota aparece.
Probar
.example { display: flex; gap: 1rem; padding: 1rem; }Nota de confianza: verifica el resultado visualmente. El conversor es un borrador para desarrolladores.