JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ol>
        <li>one</li>
        <li>two
            <ol>
                <li>two.one</li>
                <li>two.two</li>
                <li>two.three</li>
            </ol>
        </li>
        <li>three
            <ol>
                <li>three.one</li>
                <li>three.two</li>
                <ol type="a">
                    <li>three.two.one</li>
                    <li>three.two.two</li>
                </ol>
            </ol>
        </li>
        <li>four</li>
    </ol>
</body>

CSS

OL {
    counter-reset: item
}
LI {
    display: block
}
LI:before {
    content: counters(item, ".")" ";
    counter-increment: item;
}