Тени

Мягкая тень создаёт впечатление, будто карточка слегка парит над страницей. В CSS тень делается свойством box-shadow, которого в курсе CSS не было. Его значение описывает тень:

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);

• 0 — на сколько тень сдвинута вправо (отрицательное значение сдвигает её влево);
• 10px — на сколько она сдвинута вниз (отрицательное — вверх). Тень снизу создаёт впечатление, что свет падает сверху;
• 15px — размытие: чем больше значение, тем мягче край тени;
• -3px — растяжение: положительное значение делает тень больше элемента, отрицательное — меньше;
• rgb(0 0 0 / 0.1) — цвет, здесь чёрный с прозрачностью 0.1, то есть на 90% прозрачный. Это более новая запись со слэшем, которую вы видели в курсе CSS.

Можно записать несколько теней через запятую, и большинство теней Tailwind используют сразу две, чтобы выглядеть естественнее. Запоминать значения не нужно: достаточно выбрать размер. Вот как они выглядят:

Так, например, shadow-lg означает вот что (Tailwind записывает это через переменные, чтобы класс можно было сочетать с другими, но результат тот же):

.shadow-lg {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

Как и со скруглёнными углами, в Tailwind 4 названия изменились: в старых примерах shadow-sm — это сегодняшний shadow-xs, а shadow — сегодняшний shadow-sm. Класс shadow-none убирает тень.

По умолчанию тень чёрная, но ей можно задать цвет из палитры: shadow-lg shadow-orange-200 даёт светло-оранжевое свечение. На светлой странице выбирайте мягкие тени: большие тёмные выглядят тяжело. У нашей карточки уже есть светлая рамка, и вместе с тенью она хорошо выделяется на странице.