Schriftart und Unterstreichung

Tailwind hat drei Klassen für die Schriftart (font-family), eine für jede generische Schriftfamilie, die du aus dem CSS-Kurs kennst:

.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;
}

Das sind Listen mit Ersatzschriften: ui-serif, ui-sans-serif und ui-monospace bedeuten die Systemschriften des Geräts, und wo ein Browser oder Gerät sie nicht hat, geht der Browser die Liste weiter durch, zum Beispiel zu Georgia. Die Emoji-Schriften am Ende von font-sans sorgen dafür, dass Emojis farbig erscheinen. Preflight gibt der ganzen Seite font-sans, das ist also die Standardschrift, und du brauchst nur für eine andere Schrift eine Klasse. In der Lektion über das Anpassen von Tailwind fügst du eigene Schriften von Google Fonts hinzu.

Eine Serifenschrift gibt Tigers Namen einen freundlichen, bilderbuchhaften Look, während der Text in der klaren serifenlosen Schrift bleibt.

Auch für Linien an Text (text-decoration) gibt es Klassen:

.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- mit einer Farbe setzt die Farbe der Linie, mit einer Zahl ihre Dicke (decoration-2 sind 2 Pixel). underline-offset- setzt, wie weit unter dem Text die Unterstreichung liegt.

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

line-through eignet sich zum Beispiel für einen alten Preis: der Kalender des Tierheims für 15 € 12 €. Die Klassen decoration- und underline-offset- ändern nur eine Linie, sie zeichnen keine, das Element braucht also auch underline. Unser Link hat sie. Seine Unterstreichung muss nicht so dunkel sein wie sein Text: Eine blassere Linie etwas tiefer wirkt zarter, und der Link ist trotzdem leicht zu erkennen.