Preflight

Почему заголовок выглядит как обычный текст и почему у списка пропали маркеры? У каждого браузера есть свои встроенные стили: заголовки крупные и жирные, у абзацев и списков есть отступы, у списков — маркеры, а ссылки синие и подчёркнутые. Каждый браузер делает это немного по-своему, и при оформлении страницы вы постоянно на них натыкаетесь: то внешний отступ, о котором вы не просили, то размер, который вы не выбирали.

Поэтому перед любыми вашими классами Tailwind применяет собственные базовые стили, которые называются Preflight и убирают встроенные стили браузера. Вот часть из них:

*,
::before,
::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
}

ol, ul {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: inherit;
}

Первое правило может показаться вам знакомым: таблицы стилей в курсе CSS часто начинались с похожего. Значение inherit означает, что элемент берёт значение у своего родителя, поэтому у заголовка тот же размер и та же жирность, что и у окружающего текста. А list-style: none убирает маркеры.

Благодаря Preflight элемент выглядит только так, как сказано в ваших классах, в любом браузере. Заголовки и списки означают то же, что и раньше (для поисковых систем и программ чтения с экрана заголовок по-прежнему заголовок); просто выглядеть как заголовки они перестают, пока вы их не оформите. Поэтому же всё на нашей странице сжато: нигде нет внешних отступов. Пространство вы добавите в уроке об отступах и размерах.

А пока дадим заголовку размер. Класс text-3xl задаёт размер шрифта 1.875rem (30 px) вместе с подходящей высотой строки:

.text-3xl {
	font-size: 1.875rem; /* 30 px */
	line-height: 2.25rem; /* 36 px */
}

(Настоящий CSS Tailwind использует переменные вместо этих чисел, но результат тот же.) 3xl в названии — это размер, как на одежде: у Tailwind есть целая шкала размеров, от text-xs до text-9xl, и вы познакомитесь с ней в следующем уроке.

Для маркеров нужны два класса:

• list-disc — это list-style-type: disc: у пунктов появляются маркеры в виде закрашенного круга, диска.
• list-inside — это list-style-position: inside: маркер находится внутри пункта, перед его текстом. Без него маркер висит снаружи пункта, слева от него, в месте, которое освобождает внутренний отступ (padding) списка. Preflight этот отступ убрал, поэтому маркер снаружи пункта оказался бы за левым краем страницы, где его не видно.