Erstes, letztes, ungerades

Jetzt schauen wir uns die Öffnungszeiten an. Sie sind eine Liste, in der jede Zeile ein li-Element mit dem Tag links und den Zeiten rechts ist. Lange Listen wie diese lassen sich leichter lesen, wenn jede zweite Zeile einen anderen Hintergrund hat: Dein Blick rutscht nicht in die falsche Zeile.

Tailwind hat Varianten für die Position eines Elements unter seinen Geschwistern, den Kindern desselben Elternelements:

Pass auf: Die Klasse kommt an jede Zeile, nicht an die Liste. Jede Zeile prüft selbst, ob sie ungerade (oder die erste oder die letzte) ist, und erst dann gilt die Klasse. Darum haben alle Zeilen dieselben Klassen, und wenn du eine Zeile hinzufügst oder entfernst, wechseln sich die Streifen trotzdem richtig ab.

<ul>
	<li class="odd:bg-stone-100">Montag</li>
	<li class="odd:bg-stone-100">Dienstag</li>
	<li class="odd:bg-stone-100">Mittwoch</li>
</ul>

Die Zeilen sind außerdem durch Linien getrennt: Jede hat unten einen Rahmen (border-b). Die letzte Zeile braucht keinen, denn dort endet die Liste ohnehin. Die Klasse last:border-b-0 entfernt den Rahmen nur bei der letzten Zeile.