Дни и таблица

Теперь страница с расписанием, та, которую меняет скрипт. Её заголовок и абзац получают такие же классы, как на главной, а заголовок ещё и mt-12, чтобы не прилипал к шапке.

Кнопки дней. Скрипт переносит класс active с кнопки на кнопку. Что придаёт active вид? Скрипт мог бы добавлять и убирать классы Tailwind, например bg-gold. Но если у элемента два класса для одного свойства, скажем bg-white и bg-gold, побеждает тот, что стоит позже в CSS Tailwind, а не тот, что скрипт добавил последним. Скрипту пришлось бы снимать и классы другого вида. Проще наоборот: скрипт по-прежнему говорит, какая кнопка активна, а style.css с помощью @apply говорит, как это выглядит:

@layer components {
    .day {
        @apply cursor-pointer rounded-full border-2 border-gold px-4 py-1 font-semibold transition-colors hover:border-night focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-night;
    }

    .active {
        @apply bg-gold text-night;
    }
}

Каждая из четырёх кнопок получает класс day, а у первой остаётся active. У .day нет фона, поэтому .active добавляет золотой. Не задавайте кнопкам в HTML класс с bg-: утилитные классы побеждают слой components, и .active проиграл бы.

Таблица. Пять столбцов не помещаются на телефоне, но и растягивать вбок всю страницу они не должны. Поместите таблицу в div с классом overflow-x-auto (overflow-x: auto): когда таблица шире div, вбок прокручивается только div. Таблице ещё нужен класс whitespace-nowrap (white-space: nowrap), который наследуют её ячейки, чтобы текст в них не переносился на вторую строку.

Кнопки «Выбрать места». Их создаёт скрипт, поэтому и классы он задаёт сам, сразу после текста кнопки: button.className = "...";. className — это атрибут class элемента в виде текста. Строка выполняется для каждой строки таблицы, поэтому у всех кнопок одинаковые классы. Tailwind ищет названия классов во всех ваших файлах, в том числе в script.js, и создаёт для них CSS. Но только если каждое название написано целиком: в "bg-" + color Tailwind не найдёт ни одного класса.