JSFiddle - React, Tailwind, and code Playground

HTML

<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 class="a">
                <li>three.two.one</li>
                <li>three.two.two
                    <ol class="i">
                        <li>three.two.one</li>
                        <li>three.two.two</li>
                    </ol>
                </li>
            </ol>
        </ol>
    </li>
    <li>four</li>
</ol>

CSS

OL {
    counter-reset: item;
}
.a li:before {
    content: counter(item, lower-alpha)". ";
}
.i li:before {
    content: counter(item, lower-roman)". ";
}
li {
    display: block;
}
LI:before {
    content: counters(item, ".")" ";
    counter-increment: item;
}