Цвета страницы

Теперь цвета всей страницы. Как и в курсе CSS, мы задаём их для body: его фон покрывает всё окно, а цвет его текста наследуют все элементы внутри, если у них нет собственного цвета.

Чисто чёрный текст на белом фоне очень резкий. Многие сайты смягчают его: фон с лёгким оттенком и очень тёмно-серый текст вместо чёрного. Возьмём серый цвет stone — тёплый серый с оттенком коричневого, хорошо сочетающийся с оранжевым (slate, например, голубоватый):

Чёрный текст на белом фоне

Текст stone 800 на фоне stone 50

<body class="bg-stone-50 text-stone-800">

Заголовок, ссылка и бейдж сохраняют свои цвета: класс на элементе сильнее цвета, унаследованного от родителя, как вы знаете из курса CSS.

Менее важный текст, например возраст Тигра, часто делают светлее серым, чтобы основной текст выделялся: text-stone-500. Светлее текст на светлом фоне делать уже не стоит: stone-400 на stone-50 читается с трудом.