Шрифт и подчёркивание

В Tailwind три класса для шрифта (font-family), по одному на каждое из общих семейств, знакомых вам из курса CSS:

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

Это списки запасных шрифтов: ui-serif, ui-sans-serif и ui-monospace означают собственные системные шрифты устройства, а если у браузера или устройства их нет, браузер идёт дальше по списку, например к Georgia. Шрифты эмодзи в конце font-sans нужны, чтобы эмодзи показывались цветными. Preflight задаёт всей странице font-sans, так что этот шрифт используется по умолчанию, а класс нужен только для другого шрифта. В уроке о настройке Tailwind вы добавите собственные шрифты из Google Fonts.

Шрифт с засечками придаст имени Тигра дружелюбный, сказочный вид, а основной текст останется набранным чистым шрифтом без засечек.

У линий на тексте (text-decoration) тоже есть свои классы:

.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- с цветом задаёт цвет линии, а с числом — её толщину (decoration-2 — это 2 пикселя). Класс underline-offset- задаёт, как далеко под текстом проходит подчёркивание.

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

Класс line-through хорошо подходит, например, для старой цены: календарь приюта за 300 ₽ 240 ₽. Классы decoration- и underline-offset- только меняют линию, а не рисуют её, поэтому элементу нужен ещё и underline. У нашей ссылки он есть. Подчёркивание не обязано быть таким же тёмным, как текст: более бледная линия чуть ниже выглядит изящнее, и ссылку по-прежнему легко узнать.