Shrnutí

V této lekci jste se naučili, že:

• Tailwind má barevnou paletu 26 barev, každou v 11 odstínech od 50 (nejsvětlejší) do 950 (nejtmavší), a k tomu black, white a transparent.
• Třídy barev se řídí jedním vzorem: co dostane barvu, barva a její odstín. text-orange-600 nastavuje barvu textu, bg-emerald-100 barvu pozadí.
• Text se čte snadno, když jsou odstíny textu a pozadí daleko od sebe: světlé pozadí a tmavý text, nebo naopak.
• Barva textu se dědí, proto barvy celé stránky patří prvku body: bg-stone-50 text-stone-800.
• Lomítko a číslo barvu zprůhlední: bg-orange-500/20 je oranžová s neprůhledností 20 %.
• Velikosti písma jdou od text-xs (12 px) přes text-base (16 px) až po text-9xl, jsou v rem a každá nastavuje i výšku řádku.
• Prvek by měl mít pro každou vlastnost jen jednu třídu: třídu nahraďte, nepřidávejte druhou. Která ze dvou takových tříd vyhraje, záleží na pořadí v CSS od Tailwindu, ne na jejich pořadí v atributu class.
• Tloušťka jde od font-thin (100) po font-black (900); nejčastější jsou font-normal, font-medium, font-semibold a font-bold.
• Třídy leading- nastavují výšku řádku (leading-relaxed pro odstavce) a text-left, text-center, text-right a text-justify zarovnání.
• Třídy tracking- nastavují mezery mezi písmeny a uppercase, lowercase, capitalize a normal-case velikost písmen.
• font-sans (výchozí), font-serif a font-mono vybírají písmo. underline, line-through a no-underline čáru přidají nebo odeberou, třídy decoration- nastavují její barvu a underline-offset- její vzdálenost od textu.

Mourkova stránka má teď vlastní teplý vzhled: oranžové patkové jméno, jemný šedý text na světlém pozadí, zelený štítek a oranžový odkaz. V příští lekci, Mezery a rozměry, se naučíte třídy, které jsme na stránkách zatím používali bez vysvětlení: polstrování, okraje, šířku a výšku.

Na procvičení jsme připravili malý box s prosbou o dary. Upravte jeho vzhled podle toho, co jste se naučili.