Šířka i výška najednou

Čtverce jsou na webových stránkách všude: ikony, profilové fotky, malé obrázky. Psát pro každý z nich w-12 h-12 je tak běžné, že má Tailwind kratší třídu pro obojí najednou, size-12 (size znamená velikost):

.size-12 {
	width: 3rem;
	height: 3rem;
}

Přijímá stejné hodnoty jako w-* a h-*: čísla ze škály (size-8, size-16), zlomky i size-full.

Tlapka je ve svém boxu vodorovně vycentrovaná (díky text-center), ale sedí trochu vysoko. Box je vysoký 48 pixelů, ale jeho řádek textu jen 32, protože takovou výšku řádku nastavuje text-2xl. Text leží uprostřed výšky svého řádku, takže když bude řádek stejně vysoký jako box, tlapka se ocitne uprostřed. A třídy leading-* pro výšku řádku, které znáte z minulé lekce, přijímají i čísla ze škály mezer: leading-12 je line-height: 3rem, tedy 48 pixelů. (Tento trik funguje jen pro jeden řádek. Obecnější způsob, jak něco v boxu vycentrovat, se naučíte v lekci Flexbox, Grid a pozice.)