Předpony a responzivita
Předpona je podmínka, za které se má třída použít. Píše se před utilitu a odděluje se od ní dvojtečkou, takže hover:bg-black obarví pozadí načerno, jen když na prvek najedeme myší.
Předpony se řetězí a čtou se zleva jako podmínky. Nakonec stojí samotná vlastnost s hodnotou.
Hover a další stavy
<button class="bg-violet-600 hover:bg-black">Odeslat</button>
<a class="text-violet-700 hover:underline focus-visible:outline-2" href="/">Domů</a>Stavy prvku odpovídají pseudotřídám z CSS:
- předpona
hover:odpovídá v CSS pseudo-třídě:hover - použít můžeme i spoustu dalších předpon
Responzivní design
Tailwind používá přístup mobile-first. Responzivní předpony jsou tedy ekvivalent nastavení hodnoty min-width v media query.
Zápis bez předpony platí pro všechny rozměry, předpona přidává hodnotu vlastnosti od dané šířky výš.
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">Nastavení výše říká, že na tabletu bude mít grid 2 sloupce, na větších displejích pak 3 sloupce.
Výchozí breakpointy:
| Předpona | Platí od šířky | Typicky |
|---|---|---|
| bez předpony | 0 px | všechno včetně malých telefonů |
sm: |
640 px | velké telefony na šířku |
md: |
768 px | tablety |
lg: |
1024 px | notebooky |
xl: |
1280 px | stolní monitory |
2xl: |
1536 px | velké monitory |
Častá chyba je číst sm: jako „na malých obrazovkách“. Znamená „od malých nahoru“, tedy skoro všude.
Tmavý režim
<article class="bg-white text-black dark:bg-neutral-900 dark:text-neutral-100">Předpona dark: můžeme nastavit jiné CSS vlastnosti, pokud má uživatel zapnutý tmavý režim.
Vyzkoušet si to můžeme bez přepínání celého systému přímo v Chromu: otevřeme vývojářské nástroje (F12 na Windows a Linuxu, Cmd+Option+I na Macu), v nabídce se třemi tečkami zvolíme More tools → Rendering a v panelu Rendering přepneme volbu Emulate CSS media feature prefers-color-scheme na dark.
Tmavý režim není prohození černé a bílé. Čistě bílý text na čistě černém pozadí unavuje oči, a proto se sahá po tmavě šedé a jemně zašedlé bílé. Upravují se i ostatní barvy a musíme dávat pozor na zachování kontrastu mezi pozadím a textem.
Vlastní hodnoty vlastností
Někdy potřebujeme nastavit hodnotu, která ve výchozí škále Tailwindu není. To můžeme udělat pomocí zápisu hodnoty do hranatých závorek:
<div class="w-[37px] bg-[#c7f230]">Potřeba to bývá zřídka a u každého takového zápisu se vyplatí zeptat, jestli by nestačila nejbližší hodnota ze škály. Pár závorek na projekt je v pořádku, ale pokud to používáte hodně, tak obcházíte nastavenou škálu a měli byste zvážit jiný postup.
Předpony group-hover: a peer-checked: umí reagovat na stav jiného prvku – třeba obarvit popisek, když je zaškrtnuté políčko vedle něj. Najděte si je v dokumentaci a rozmyslete si, čím jsou v CSS nahraditelné.