Čtení názvů tříd

Pár tříd Tailwindu už znáte. Podívejte se na ně vedle CSS, které vytvářejí:

Názvy nejsou náhodné. Název třídy říká, co třída dělá, a většinou se skládá z CSS, které znáte:

• Název některých tříd je jen hodnota CSS, protože je jasné, ke které vlastnosti patří: uppercase může být jedině text-transform. Stejně tak italic je font-style: italic (kurzíva) a underline je text-decoration-line: underline (podtržení).
• Jiné třídy začínají krátkým slovem pro vlastnost, za kterým následuje hodnota: text-center (zarovnání textu), font-bold (tloušťka písma), list-disc (typ odrážek seznamu).

Stejné krátké slovo ale nemusí vždycky znamenat stejnou vlastnost. Slovem text- začínají třídy pro zarovnání textu i pro jeho velikost (text-3xl) a v příští lekci ho použijete i pro barvu textu. Když si tedy nejste jistí, třídu si vyhledejte. Dokumentace Tailwindu na tailwindcss.com/docs (v angličtině) má pro každou vlastnost CSS stránku s tabulkou jejích tříd a CSS, které každá z nich vytváří. Stránku pro danou vlastnost najdete nejrychleji přes vyhledávání nahoře: napište do něj vlastnost CSS, kterou znáte, třeba font-style. Dokumentace popisuje Tailwind 4, tedy verzi, kterou používá tento kurz. Některé návody na internetu jsou ještě pro starší Tailwind 3, ve kterém se pár tříd jmenuje jinak.

Nová třída underline si zaslouží pár slov. Čáry pod textem nebo přes text nastavuje vlastnost CSS text-decoration-line: hodnota underline text podtrhne, line-through ho přeškrtne a none čáru odstraní. Prohlížeče odkazy podtrhávají, Preflight ale podtržení odstranil, a to i s jejich modrou barvou (color: inherit a text-decoration: inherit), takže náš odkaz vypadá jako obyčejný text. To je problém: návštěvník nepozná, že na něj může kliknout. Podtržení je nejjasnější znak odkazu.