Первый, последний, нечётный

Теперь займёмся часами работы. Это список, в котором каждая строка — элемент li: слева день недели, справа часы. Длинные списки вроде этого легче читать, когда у каждой второй строки другой фон: взгляд не соскальзывает на соседнюю строку.

В Tailwind есть варианты для положения элемента среди соседних, то есть детей одного родителя:

Будьте внимательны: класс ставится на каждую строку, а не на список. Каждая строка сама проверяет, нечётная ли она (или первая, или последняя), и только тогда класс действует. Поэтому у всех строк одинаковые классы, а когда вы добавляете или убираете строку, полосы всё равно чередуются правильно.

<ul>
	<li class="odd:bg-stone-100">Понедельник</li>
	<li class="odd:bg-stone-100">Вторник</li>
	<li class="odd:bg-stone-100">Среда</li>
</ul>

Строки отделены друг от друга и линиями: у каждой есть рамка снизу (border-b). Последней строке она не нужна, ведь список на ней всё равно заканчивается. Класс last:border-b-0 убирает рамку только у последней строки.