Фильмы и цены

Под hero-блоком — фильмы этой недели. Сначала мобильная версия: три карточки идут одна под другой, а от 768 px и шире — в три столбца:

<div class="mt-6 grid gap-6 md:grid-cols-3">

У сетки без класса grid-cols-* один столбец, поэтому на телефоне карточки идут одна под другой, с промежутками между ними. Каждая карточка получает вид карточки из урока «Рамки, тени и изображения». У трёх карточек одинаковые классы: напишите их один раз и скопируйте или выделите class="film" и нажимайте Ctrl+D (на Mac Cmd+D), пока не выделятся все три, а затем измените их сразу.

Таблицы. Ячейкам с ценами на билеты нужны внутренние отступы и линия под каждой строкой, и ячейкам таблицы с расписанием тоже. В проекте с сайтом кинотеатра одно правило для th, td оформляло обе таблицы. С Tailwind каждой ячейке понадобились бы свои классы, а ячейки таблицы с расписанием создаёт скрипт. Для стилей простых элементов вроде этих у Tailwind есть слой base, тот самый, где живёт Preflight. Правило в нём с @apply оформляет каждую ячейку на обеих страницах, в том числе созданные скриптом:

@layer base {
    th,
    td {
        @apply border-b border-stone-200 px-4 py-2 text-left;
    }
}

Утилитные классы побеждают его, как побеждают Preflight, так что у ячейки по-прежнему может быть свой класс.