Filme und Preise

Unter dem Hero stehen die Filme dieser Woche. Zuerst das Smartphone: Die drei Karten stehen untereinander, und ab 768 px in drei Spalten:

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

Ein Grid ohne Klasse grid-cols-* hat eine einzige Spalte, auf einem Smartphone stehen die Karten also untereinander, mit Abständen dazwischen. Jede Karte bekommt das Aussehen einer Karte aus der Lektion Rahmen, Schatten und Bilder. Die drei Karten haben dieselben Klassen: Schreibe sie einmal und kopiere sie, oder markiere class="film", drücke Ctrl+D (am Mac Cmd+D), bis alle drei markiert sind, und ändere sie alle auf einmal.

Die Tabellen. Die Zellen der Ticketpreise brauchen Padding und eine Linie unter jeder Zeile, ebenso die Zellen der Programmtabelle. Im Projekt zur Kino-Website hat eine Regel für th, td beide Tabellen gestaltet. Mit Tailwind bräuchte jede Zelle ihre Klassen, und die Zellen der Programmtabelle erzeugt das Skript. Für Stile von einfachen Elementen wie diesen hat Tailwind den Layer base, den, in dem auch Preflight liegt. Eine Regel dort mit @apply gestaltet jede Zelle auf beiden Seiten, auch die, die das Skript erzeugt:

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

Utility-Klassen setzen sich dagegen durch, wie gegen Preflight, eine Zelle kann also trotzdem eine eigene Klasse bekommen.