Responsives CSS zu Tailwind
@media (min-width: 768px) → md:. 1024px → lg:. Komplexe Queries brauchen Prüfung.
Media Queries mit min-width lassen sich gut auf Tailwind-Präfixe abbilden: 768px entspricht md:, 1024px entspricht lg:. Schwieriger wird es bei max-width, denn Tailwind denkt vom kleinen Bildschirm aufwärts. Kombinierte Bedingungen oder Bereiche übersetzen sich nicht automatisch und sollten Sie im echten Layout nachstellen und testen.
Prefixes md: und lg:
Media Queries an Default-Breakpoints werden zu md: / lg:. Seltene Breakpoints brauchen Note oder CSS.
Mobile-first
Tailwind nimmt mobile Basis und skaliert hoch. Mental umkehren, wenn CSS desktop-first war.
Eine Property, ein Prefix
Ändern Sie im Responsive-Beispiel eine Breite nach der anderen, um zu sehen, welche Note erscheint.
Ausprobieren
.example { display: flex; gap: 1rem; padding: 1rem; }Vertrauenshinweis: Ausgabe visuell prüfen. Der Konverter ist ein Entwurfshilfe.