JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
     <li class="red">
              <a href="">1</a>
              <ul>
                      <li class="green">
                              <a href="">2</a>
                               <ul>
                                     <li> 
                                             <a href="">3</a>
                                     </li>
                                      ....
                               </ul>
                      </li>
              </ul>
     </li>
</ul>
<ul>
     <li class="green">
              <a href="">1</a>
              <ul>
                      <li class="red">
                              <a href="">2</a>
                               <ul>
                                     <li> 
                                             <a href="">3</a>
                                     </li>
                                      ....
                               </ul>
                      </li>
              </ul>
     </li>
</ul>

CSS

.green a { background-color: green; }
.red a { background-color: red ;}
.red .green a { background-color: green; }
.green .red a { background-color: red ;}