Breakpoints
Die Breite, ab der eine Klasse mit Präfix gilt, heißt Breakpoint: Bei dieser Breite ändert sich das Layout der Seite. Tailwind hat fünf Breakpoints, jeder mit eigenem Präfix:
| Präfix | Ab | CSS | Typische Bildschirme |
|---|---|---|---|
sm: | 40rem (640 px) | @media (width >= 40rem) | Smartphones im Querformat |
md: | 48rem (768 px) | @media (width >= 48rem) | Tablets |
lg: | 64rem (1024 px) | @media (width >= 64rem) | Tablets im Querformat, kleine Laptops |
xl: | 80rem (1280 px) | @media (width >= 80rem) | Laptops und Computer |
2xl: | 96rem (1536 px) | @media (width >= 96rem) | große Monitore |
Die Namen kommen von Kleidergrößen: small, medium, large und extra large. Die Breiten sind in rem angegeben, sie folgen also der Textgröße, die der Besucher im Browser eingestellt hat: Bei größerem Text wechselt die Seite später zum breiteren Layout, nämlich erst, wenn wirklich genug Platz dafür da ist.
Jedes Präfix gilt ab seiner Breite aufwärts, also auch auf allen breiteren Bildschirmen. Im Bild siehst du, welche Präfixe bei den Breiten der Vorschaubreite-Leiste gelten: bei 375 px keines, bei 768 px sm: und md: und bei 1280 px alle außer 2xl:.
Darum kann ein Element mehrere Klassen mit verschiedenen Präfixen haben, von denen jede bei ihrem Breakpoint übernimmt:
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">Eine Spalte auf dem Smartphone, zwei ab 640 px und vier ab 1024 px. Bei 1280 px gelten sowohl sm:grid-cols-2 als auch lg:grid-cols-4, welche gewinnt also? Das entscheidet die Kaskade, wie du sie aus dem CSS-Kurs kennst: Tailwind schreibt das CSS für die Breakpoints vom kleinsten zum größten, die Regel für den breiteren Bildschirm steht also später und gewinnt. Die Reihenfolge der Klassen im class-Attribut spielt keine Rolle.