Breakpointy
Šířce, od které třída s předponou platí, se říká breakpoint (bod zlomu): v této šířce se rozvržení stránky změní. Tailwind má pět breakpointů a každý z nich má svou předponu:
| Předpona | Od | CSS | Typické obrazovky |
|---|---|---|---|
sm: | 40rem (640 px) | @media (width >= 40rem) | mobily otočené na šířku |
md: | 48rem (768 px) | @media (width >= 48rem) | tablety |
lg: | 64rem (1024 px) | @media (width >= 64rem) | tablety otočené na šířku, malé notebooky |
xl: | 80rem (1280 px) | @media (width >= 80rem) | notebooky a počítače |
2xl: | 96rem (1536 px) | @media (width >= 96rem) | velké monitory |
Názvy pocházejí z velikostí oblečení: small (malá), medium (střední), large (velká) a extra large (extra velká). Šířky jsou v rem, takže se řídí velikostí textu, kterou si návštěvník nastavil v prohlížeči: s větším textem se stránka přepne na širší rozvržení později, až když se do něj text opravdu vejde.
Každá předpona platí od své šířky výš, tedy i na všech širších obrazovkách. Na obrázku vidíte, které předpony platí v šířkách z lišty náhledu: při 375 px žádná, při 768 px sm: a md: a při 1280 px všechny kromě 2xl:.
Proto může mít jeden prvek několik tříd s různými předponami a každá z nich se uplatní od svého breakpointu:
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">Jeden sloupec na mobilu, dva od 640 px a čtyři od 1024 px. Při 1280 px platí sm:grid-cols-2 i lg:grid-cols-4. Která z nich vyhraje? Rozhodne kaskáda, jak ji znáte z kurzu CSS: Tailwind píše CSS pro breakpointy od nejmenšího po největší, takže pravidlo pro širší obrazovku je v CSS až za pravidlem pro užší a vyhraje. Na pořadí tříd v atributu class nezáleží.
Pokyny
Začněte programovat zdarma
2/7