Velikost písma

V minulé lekci jste nadpis zvětšili třídou text-3xl. Je to jeden stupeň škály velikostí písma v Tailwindu:

xs, sm, lg a xl jsou velikosti jako na oblečení: extra small (extra malá), small (malá), large (velká) a extra large (extra velká). text-base je základní velikost, 16 pixelů. Od xl výš znamená každé další x větší velikost: 2xl, 3xl a tak dál. Existují i větší velikosti, až po text-9xl (8rem, 128 px).

Velikosti jsou v rem, takže respektují velikost písma, kterou si návštěvník nastavil v prohlížeči, jak to znáte z kurzu CSS. A každá třída velikosti nastavuje i výšku řádku, která se k velikosti hodí. Velikosti pro běžný text mají prostorné řádky, zhruba jedenapůlkrát vyšší, než je velikost písma, aby se text dobře četl. Velké nadpisy mají řádky těsnější (od text-5xl výš je řádek vysoký přesně jako písmo), aby nadpis na dvou řádcích držel pohromadě.

Možná jste si všimli, že třídy velikosti začínají na text- stejně jako třídy barev (text-orange-600) a text-center. Tailwind je rozliší podle toho, co následuje: velikost, barva, nebo zarovnání.

Když chcete změnit velikost nadpisu, třídu text-3xl jinou velikostí nahraďte, nepřidávejte druhou. Z kurzu CSS víte, že když dvě pravidla se stejnou specificitou nastavují stejnou vlastnost, vyhraje to, které je v souboru se styly později. Všechny třídy Tailwindu mají stejnou specificitu (jedna třída), takže když má prvek dvě velikosti, rozhoduje pořadí jejich pravidel v CSS od Tailwindu, ne jejich pořadí v atributu class. Například s class="text-4xl text-3xl" bude mít nadpis velikost text-4xl, přestože text-3xl je poslední. Abyste nemuseli hádat, dávejte každému prvku pro každou vlastnost jen jednu třídu.