Rámečky

V této lekci uděláme z obyčejného bílého boxu moderní kartu: s rámečkem, zaoblenými rohy, stínem a obrázkem, který do ní pěkně zapadne. Budeme pracovat na adopční kartě Oskara, mladého černého kocoura. Karta už má třídy, které znáte z minulých lekcí: barvy, velikosti písma, polstrování a okraje, maximální šířku a třídu mx-auto, která kartu vycentruje.

V kurzu CSS jste rámeček zapisovali třemi hodnotami: border: 1px solid gray, tedy šířkou, stylem a barvou. V Tailwindu má každá z nich vlastní třídy a většinou vám stačí jediná: border.

Pozor: číslo tu znamená šířku v pixelech, ne krok na škále mezer. border-2 jsou 2 pixely, kdežto p-2 je 8 pixelů.

Proč stačí šířka? V kurzu CSS se rámeček bez stylu vůbec nezobrazil. Preflight, základní styly Tailwindu, ale každému prvku předem nastaví border: 0 solid: plnou čáru širokou 0 pixelů. Jakmile jí nějaká třída dá šířku, čára se objeví. Pro jiné styly čáry jsou třídy border-dashed (čárkovaná), border-dotted (tečkovaná) a border-double (dvojitá).

A barva? Tu Preflight nenastavuje, takže rámeček dostane výchozí barvu currentColor (aktuální barva), tedy barvu textu prvku. To se hodí třeba u tlačítka, jehož rámeček má ladit s textem, ale karta s tmavým textem dostane tmavý rámeček. Jinou barvu nastavíte pomocí barevné palety, kterou znáte: border-stone-200 nastaví border-color na světlý odstín barvy stone, stejně jako bg-stone-200 nastaví pozadí.