Odstíny

Číslo odstínu říká, jak světlá barva je: 50 je skoro bílá, 950 skoro černá a kolem 500 je barva nejsytější. Světlé odstíny se hodí pro pozadí, tmavé pro text.

Pro pozadí má Tailwind třídy, které začínají na bg- (z anglického background, pozadí). Nastavují vlastnost background-color a používají stejné barvy a odstíny jako třídy text-:

Vzor je pořád stejný: co dostane barvu, pak barva a její odstín. Potkáte ho i u dalších tříd, například u barvy rámečku.

Světlé pozadí a tmavý text ve stejné barvě je oblíbený vzhled pro malé štítky. Jeden takový uděláme ze slova „Hravý“ pod Mourkovým věkem. Použijeme barvu emerald (smaragdová), svěží zelenou, která se k oranžové hodí:

Hravý

Při výběru odstínů myslete na kontrast, stejně jako v kurzu CSS: text se musí od pozadí jasně odlišovat. Čím dál jsou od sebe oba odstíny, tím lépe. Na světlé pozadí (50 až 200) použijte text v odstínu 700 nebo tmavším, na tmavé pozadí (800 až 950) text v odstínu 200 nebo světlejším. Odstíny blízko sebe se čtou špatně, hlavně v malém textu:

Smaragdová 500 na smaragdové 100 se čte špatně.

Smaragdová 800 na smaragdové 100 se čte snadno.

Proto také odkaz dostal text-orange-700: velký nadpis se dobře čte i v jasnější orange-600, menší text odkazu ale potřebuje tmavší odstín.

Všimněte si, že pozadí štítku těsně obepíná jeho písmena. Jak přidat volné místo kolem textu, se naučíte v příští lekci.