Breakpoints
Zwei Breakpoint-Systeme: Screen-Breakpoints (Viewport-basiert, z.B. md:flex)
und Container-Breakpoints (basierend auf Container Queries, z.B. @md:flex).
Container-Breakpoints sollten bevorzugt werden, sobald sie im Projekt-Setup aktiviert sind.
Aktiver Viewport
Live-Anzeige, welcher Screen-Breakpoint gerade aktiv ist.
Viewport: — px
Aktiv: base sm md lg xl 2xl
Screen-Breakpoints
Für Tailwind-Prefixes wie sm:, md:, lg: usw.
| Name | rem | px | Prefix | Geräte |
|---|---|---|---|---|
| sm | 40rem | 640px | sm: | Kleine Tablets / Phablets |
| md | 48rem | 768px | md: | Tablets im Portrait |
| lg | 64rem | 1024px | lg: | Tablets Landscape / kleine Laptops |
| xl | 80rem | 1280px | xl: | Laptops / Desktops |
| 2xl | 96rem | 1536px | 2xl: | Große Desktops |
Container-Breakpoints
Für @container-basierte Queries. Prefixes wie @md:flex wirken auf den nächsten Container mit @container-Klasse.
| Name | rem | px | Prefix |
|---|---|---|---|
| 3xs | 16rem | 256px | @3xs: |
| 2xs | 18rem | 288px | @2xs: |
| xs | 20rem | 320px | @xs: |
| sm | 24rem | 384px | @sm: |
| md | 28rem | 448px | @md: |
| lg | 32rem | 512px | @lg: |
| xl | 36rem | 576px | @xl: |
| 2xl | 42rem | 672px | @2xl: |
| 3xl | 48rem | 768px | @3xl: |
| 4xl | 56rem | 896px | @4xl: |
| 5xl | 64rem | 1024px | @5xl: |
| 6xl | 72rem | 1152px | @6xl: |
| 7xl | 80rem | 1280px | @7xl: |
Wann was?
- Screen-Breakpoints für Seitenlayout (z.B. Sidebar einklappen, Hero-Padding).
- Container-Breakpoints für Components, die in verschieden breiten Slots landen (z.B. Card in Sidebar vs. in Haupt-Spalte).
- Fluide Größen (
clamp(… cqi …)) sind oft die bessere Wahl als ein Breakpoint-Switch.