Rodina písma a podtržení

Pro písmo (font-family) má Tailwind tři třídy, pro každou obecnou rodinu z kurzu CSS jednu:

.font-sans {
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-serif {
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.font-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Jsou to seznamy záložních písem: ui-serif, ui-sans-serif a ui-monospace znamenají vlastní systémová písma zařízení, a kde je prohlížeč nebo zařízení nemá, pokračuje prohlížeč dál po seznamu, třeba k písmu Georgia. Písma pro emoji na konci font-sans zajistí, že se emoji zobrazí barevně. Preflight dává celé stránce font-sans, takže je výchozí a třídu potřebujete, jen když chcete jiné písmo. V lekci o přizpůsobení Tailwindu přidáte vlastní písma z Google Fonts.

Patkové písmo dodá Mourkovu jménu přívětivý vzhled jako z pohádkové knížky, zatímco text zůstane v čistém bezpatkovém písmu.

Čáry na textu (text-decoration) mají také své třídy:

.underline {
	text-decoration-line: underline;
}
.line-through {
	text-decoration-line: line-through;
}
.no-underline {
	text-decoration-line: none;
}
.decoration-orange-300 {
	text-decoration-color: oklch(83.7% 0.128 66.29);
}
.underline-offset-4 {
	text-underline-offset: 4px;
}

decoration- s barvou nastavuje barvu čáry a s číslem její tloušťku (decoration-2 jsou 2 pixely). underline-offset- nastavuje, jak daleko pod textem je podtržení.

underline   line-through   decoration-orange-300   decoration-2   underline-offset-4

line-through se hodí například pro starou cenu: kalendář útulku za 300 Kč 250 Kč. Třídy decoration- a underline-offset- čáru jen upraví, nenakreslí ji, takže prvek potřebuje i třídu underline. Náš odkaz ji už má. Jeho podtržení nemusí být stejně tmavé jako text: světlejší čára o kousek níž působí lehčeji a odkaz se pořád snadno pozná.