The Days and the Table

Now the showtimes page, the one the script changes. Its heading and paragraph get classes like those on the home page, and the heading also mt-12, so that it doesn't stick to the header.

The day buttons. The script moves the class active from button to button. What gives active its look? The script could add and remove Tailwind classes, such as bg-gold. But when an element has two classes for the same property, say bg-white and bg-gold, the one that comes later in Tailwind's CSS wins, not the one the script added last. So the script would have to take off the classes of the other look too. It's simpler the other way round: the script keeps saying which button is active, and style.css says what that looks like, with @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;
    }
}

Each of the four buttons gets the class day, and the first one keeps active. .day has no background, so .active adds the gold one. Don't give the buttons a bg- class in the HTML: utility classes win over the components layer, and .active would lose.

The table. Five columns don't fit on a phone, but they shouldn't push the whole page sideways either. Put the table into a div with the class overflow-x-auto (overflow-x: auto): when the table is wider than the div, only the div scrolls sideways. The table also gets whitespace-nowrap (white-space: nowrap), which its cells inherit, so that their text doesn't wrap onto a second line.

The Choose seats buttons. The script makes them, so it gives them their classes too, right after their text: button.className = "...";. className is the element's class attribute as text. The line runs for every row, so all the buttons get the same classes. Tailwind looks for class names in all your files, script.js included, so it makes their CSS. But only if each name is written out whole: in "bg-" + color, Tailwind would find no class.