Du CSS responsive à Tailwind
@media (min-width: 768px) → md:. 1024px → lg:. Les requêtes complexes demandent une revue.
Les media queries en min-width s’alignent naturellement sur les préfixes de Tailwind : 768px pour md:, 1024px pour lg:. La logique mobile-first complique en revanche les requêtes en max-width, qui reposent sur le raisonnement inverse. Les conditions combinées ou par plages se réécrivent presque toujours à la main, test réel à l’appui.
Préfixes md: et lg:
Les media queries alignées sur les breakpoints par défaut deviennent md: / lg:. Les breakpoints rares demandent une note ou du CSS.
Mobile-first
Tailwind assume une base mobile et monte. Inversez mentalement si votre CSS était desktop-first.
Une propriété, un préfixe
Changez une largeur à la fois dans l’exemple Responsive pour voir quelle note apparaît.
Essayer
.example { display: flex; gap: 1rem; padding: 1rem; }Note de confiance : vérifiez le rendu. Le convertisseur est une aide de brouillon.