Die Tage und die Tabelle

Jetzt die Programmseite, die, die das Skript verändert. Ihre Überschrift und ihr Absatz bekommen Klassen wie auf der Startseite, die Überschrift außerdem mt-12, damit sie nicht am Header klebt.

Die Tag-Buttons. Das Skript verschiebt die Klasse aktiv von Button zu Button. Was gibt aktiv sein Aussehen? Das Skript könnte Tailwind-Klassen hinzufügen und entfernen, etwa bg-gold. Aber wenn ein Element zwei Klassen für dieselbe Eigenschaft hat, sagen wir bg-white und bg-gold, gewinnt die, die im CSS von Tailwind später kommt, nicht die, die das Skript zuletzt hinzugefügt hat. Das Skript müsste also auch die Klassen des anderen Aussehens entfernen. Einfacher ist es andersherum: Das Skript sagt weiter, welcher Button aktiv ist, und style.css sagt mit @apply, wie das aussieht:

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

    .aktiv {
        @apply bg-gold text-nacht;
    }
}

Jeder der vier Buttons bekommt die Klasse wochentag, und der erste behält aktiv. .wochentag hat keinen Hintergrund, also fügt .aktiv den goldenen hinzu. Gib den Buttons im HTML keine bg--Klasse: Utility-Klassen setzen sich gegen den Layer components durch, und .aktiv würde verlieren.

Die Tabelle. Fünf Spalten passen nicht auf ein Smartphone, sollen aber auch nicht die ganze Seite zur Seite schieben. Setze die Tabelle in ein div mit der Klasse overflow-x-auto (overflow-x: auto): Wenn die Tabelle breiter ist als das div, scrollt nur das div zur Seite. Die Tabelle bekommt außerdem whitespace-nowrap (white-space: nowrap), das ihre Zellen erben, damit ihr Text nicht in eine zweite Zeile umbricht.

Die Buttons Plätze wählen. Das Skript erzeugt sie, also gibt es ihnen auch ihre Klassen, gleich nach ihrem Text: button.className = "...";. className ist das Attribut class des Elements als Text. Die Zeile läuft für jede Zeile der Tabelle, alle Buttons bekommen also dieselben Klassen. Tailwind sucht Klassennamen in allen deinen Dateien, auch in script.js, und erzeugt ihr CSS. Aber nur, wenn jeder Name ganz ausgeschrieben ist: Bei "bg-" + farbe würde Tailwind keine Klasse finden.