Průhledné barvy

V kurzu CSS jste barvy zprůhledňovali alfou, například rgba(71, 105, 88, 0.2) nebo rgb(255 0 0 / 50%). V Tailwindu napíšete za barvu lomítko a číslo: její neprůhlednost v procentech, od 0 (úplně průhledná) do 100 (neprůhledná). Tailwind tomu říká modifikátor průhlednosti (opacity modifier):

(Přesné CSS od Tailwindu se k výsledku dostane jinou cestou, barva je ale stejná.) Nejčastější jsou násobky 5 nebo 10, funguje ale jakékoli číslo od 0 do 100. A je tu ještě jedna barva, transparent (průhledná): bg-transparent udělá pozadí úplně průhledné.

Skrz průhlednou barvu prosvítá to, co je za ní. To se hodí, když barva za ní není pořád stejná. Například pozadí bg-black/50 položené přes fotku ji ztmaví, takže se na ní dobře čte bílý text. A světlý průhledný nádech se hodí na jakékoli pozadí:

zvýrazněné slovo zvýrazněné slovo zvýrazněné slovo

Použijeme ho jako zvýrazňovač: slova „připravený na nový domov“ v odstavci o adopci jsou v prvku strong a dostanou světle oranžové pozadí, skrz které prosvítá stránka.

Lomítko zprůhlední jen tu jednu barvu. Pro zprůhlednění celého prvku se vším, co obsahuje, má CSS vlastnost opacity, kterou znáte z kurzu CSS; její třídy potkáte v lekci o rámečcích, stínech a obrázcích.