Font Family and Underline

Tailwind has three classes for the font (font-family), one for each generic family you know from the CSS course:

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

They are lists of fallbacks: ui-serif, ui-sans-serif and ui-monospace mean the device's own system fonts, and where a browser or a device doesn't have them, the browser goes on down the list, for example to Georgia. The emoji fonts at the end of font-sans make emoji show in color. Preflight gives the whole page font-sans, so it's the default and you only need a class for a different font. In the lesson on customizing Tailwind, you'll add your own fonts from Google Fonts.

A serif font will give Tiger's name a friendly, storybook look, while the text stays in the clean sans-serif font.

Lines on text (text-decoration) have their classes too:

.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- with a color sets the color of the line, and with a number its thickness (decoration-2 is 2 pixels). underline-offset- sets how far below the text the underline is.

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

line-through is good, for example, for an old price: the shelter's calendar for $15 $12. The decoration- and underline-offset- classes only change a line, they don't draw one, so the element needs underline too. Our link has it. Its underline doesn't have to be as dark as its text: a paler line a little lower looks more delicate, and the link is still easy to recognize.