Tailwind for the Cinema

Welcome to the path's third project! The website of Starlight Cinema loads its showtimes, lets visitors pick seats and remembers their tickets. Now it gets a new look, made with Tailwind, and with it something the CSS course couldn't give it: it works on phones. In a window as narrow as a phone's screen, the old site squeezes the three film cards side by side, a few words to a line, and a real phone shrinks the whole page until its text is tiny. The CSS course never got to changing the layout with the width of the screen. With Tailwind's breakpoints, it's easy: you'll lay out each part of the site for a phone first, and then for wider screens.

The files. The editor has your site as you finished it in the showtimes project. The preview shows showtimes.html, the first page. To see the home page, click Home in the preview, and Showtimes to come back. (After each Run, the preview starts on the showtimes page again.) Whichever page you're looking at, the checks look at both.

Turning Tailwind on. style.css becomes a Tailwind stylesheet, as in the Tailwind course. All the old rules go: CSS outside Tailwind's layers would win over its classes. In their place comes the cinema's own theme, as in the lesson Customizing Tailwind:

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap");
@import "tailwindcss";

@theme {
    --color-night: #1e1b4b;
    --color-gold: #f59e0b;
    --font-display: "Playfair Display", serif;
}

These are the two colors of the old stylesheet: the deep indigo of the night sky in the header, and the amber of the button, golden like a star. They're almost the same as Tailwind's indigo-950 and amber-500, and you could use those. But names of their own say what each color is for (bg-night, text-gold), and if the cinema ever changes its colors, you change one line. Playfair Display is a font for the logo and the headings, with the elegance of an old cinema. Remember that the @import of a font has to come first.

When you click Run, the page loses its look: Preflight removes the browser's styles, and there are no classes yet. That's expected. In the next exercises, you'll style the site part by part. Until you style the showtimes page, you also won't see which day is chosen or which seats are taken: the script still marks them with classes, but those classes have no look yet. As soon as style.css imports Tailwind, the bar Preview width appears above the preview. You'll need it all the time.

The base of both pages. The body gets the background and the color of the text. main gets the width of the content, as in the exercise Content Width on Big Screens: mx-auto max-w-5xl, with padding on the sides, smaller on a phone than on a computer.