Tailwind предоставляет разработчику определенное многообразие классов утилит для работ со списками. Однако, для того чтобы создать многоуровневый нумерованный список, необходимо прибегнуть к кастомизации.

Итак, допустим у нас есть следующая разметка HTML:

<ol>
	<li>Первый уровень
		<ol>
			<li>Второй уровень
				<ol>
					<li>Третий уровень. Первый элемент</li>
					<li>Третий уровень. Второй элемент</li>
				</ol>
			</li>
		</ol>
	</li>
</ol>

Нужно получить многоуровневую нумерацию вложенных элементов, соответствующую шаблону 1., 1.1., 1.1.1.

Для создания пользовательского класса list-nested добавим в файл main.css Tailwind проекта следующие строки:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* многоуровневый нумерованный список */
@layer {
    ol.list-nested {
        counter-reset: item;
    }

    ol.list-nested li::before {
        counter-increment: item;
        content: counters(item, ".") ". ";
    }
}

Директива @layer помогает контролировать порядок объявления пользовательских классов, автоматически перемещая новые стили в соответствующую директиву @tailwind, и включает необходимые функции.

Спасибо за внимание.