Dny a tabulka

Teď stránka s programem, ta, kterou mění skript. Nadpis a odstavec dostanou podobné třídy jako na úvodní stránce, nadpis navíc mt-12, aby se nelepil na záhlaví.

Tlačítka dnů. Skript přesouvá třídu aktivni z tlačítka na tlačítko. Co jí dá vzhled? Skript by mohl přidávat a odebírat třídy Tailwindu, třeba bg-zlata. Když má ale prvek dvě třídy pro stejnou vlastnost, třeba bg-white a bg-zlata, vyhraje ta, která je v CSS Tailwindu později, ne ta, kterou skript přidal naposledy. Skript by tedy musel odebírat i třídy druhého vzhledu. Jednodušší je to naopak: skript dál říká, které tlačítko je aktivní, a style.css říká, jak to vypadá, pomocí @apply:

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

    .aktivni {
        @apply bg-zlata text-noc;
    }
}

Všechna čtyři tlačítka dostanou třídu den a první si nechá aktivni. .den nemá žádné pozadí, takže .aktivni přidá zlaté. Tlačítkům v HTML nedávejte žádnou třídu bg-: utility třídy vyhrávají nad vrstvou components a .aktivni by prohrála.

Tabulka. Pět sloupců se na mobil nevejde, a přesto by se kvůli nim neměla posouvat do strany celá stránka. Dejte tabulku do div se třídou overflow-x-auto (overflow-x: auto): když je tabulka širší než div, posouvá se do strany jen div. Tabulka navíc dostane whitespace-nowrap (white-space: nowrap). Tuto vlastnost zdědí i buňky, takže se jejich text nezalamuje na další řádek.

Tlačítka Vybrat místa. Vytváří je skript, takže jim dá i třídy, řádkem hned pod tím, který nastavuje jejich text: tlacitko.className = "...";. className je atribut class prvku jako text a ten řádek kódu funguje jako šablona: tlačítko v každém řádku tabulky dostane stejné třídy. Tailwind hledá názvy tříd ve všech vašich souborech, i ve script.js, takže pro ně vytvoří CSS. Ale jen když je každý název napsaný celý: v "bg-" + barva by Tailwind žádnou třídu nenašel.