JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <nav id="container">
  <ul>
    <li>Text</li>
    <li>
      <ul>
        <li>Text</li>
        <li>
          <ul>
            <li>Text</li>
          </ul>
       </li>
      </ul>
    <li>
    <li>
      <ul>
        <li>Text</li>
        <li>
          <ul>
              <li>Text</li>
              <li>
                  <ul>
                     <li>Text</li>
                  </ul>
              </li>
          </ul>
       </li>
      </ul>
    <li>
  </ul>
</nav>
</ul>

CSS

.level-1{
    background: red;
}

.level-2{
    background: yellow;
}


.level-3{
    background: green;
}

.level-4{
    background: blue;
}

JavaScript

$(function(){
    $('#container ul').each(function(){
        var classname = 'level-' + ($(this).parentsUntil('#container', 'ul').length + 1);
        $(this).addClass(classname);
    });
});