Filmy a ceny

Pod úvodní sekcí jsou filmy tohoto týdne. Podle zásady mobile first jsou tři karty pod sebou a od 768 px ve třech sloupcích:

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

Mřížka bez třídy grid-cols-* má jediný sloupec, takže na mobilu jsou karty pod sebou a mezi nimi mezery. Každá karta dostane vzhled karty z lekce Rámečky, stíny a obrázky. Všechny tři karty mají stejné třídy: napište je jednou a pak je zkopírujte, nebo označte první class="film", dvakrát stiskněte Ctrl+D (na Macu Cmd+D), aby se označila všechna tři, a změňte je najednou.

Tabulky. Buňky s cenami vstupenek potřebují polstrování a čáru pod každým řádkem a buňky tabulky s programem taky. V projektu Web kina obě tabulky stylovalo jedno pravidlo pro th, td. S Tailwindem by třídy potřebovala každá buňka a buňky tabulky s programem vytváří skript. Pro styly obyčejných prvků, jako jsou tyhle, má Tailwind vrstvu base, tu, ve které je Preflight. Pravidlo v ní s @apply nastyluje každou buňku na obou stránkách, i ty, které vytváří skript:

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

Utility třídy nad ním vyhrávají, stejně jako nad Preflightem, takže buňka může dostat i vlastní třídu.