ordered list nested counters not working

[heather-lau]

I want to use nested counters but it doesn't support

<ol className='list-decimal'>
  <li>Yellow</li>
  <li>Blue
    <ol>
      <li>Red</li>
      <li>Green</li>
    </ol>
  </li>
</ol>

I excepted 1, 2, 2.1, 2.2, thanks

[wongjn]

This is not really a matter of support, since default <ol> nesting does not do nested numbering either.

You'll want to use CSS counters and MDN helpfully have an example of nesting that you could emulate with Tailwind:

<ol class="pl-4 [counter-reset:section]">
  <li class="[counter-increment:section] marker:[content:counters(section,'.')]">Yellow</li>
  <li class="[counter-increment:section] marker:[content:counters(section,'.')]">Blue
    <ol class="pl-4 [counter-reset:section]">
      <li class="[counter-increment:section] marker:[content:counters(section,'.')]">Red</li>
      <li class="[counter-increment:section] marker:[content:counters(section,'.')]">Green</li>
    </ol>
  </li>
</ol>

Here's a Tailwind Play of it in action

[Serenit8]

I appreciate the information and advice you have shared. I will try to figure it out for more.
MyPaymentsPlus App

[Spudisis]

Doesn't work in Safari

[NKapali]

Safari and Firefox still seems to have some issues.