JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Item 1
        <ul>
            <li>Item 1's 1st Child
                <ul>
                    <li>Item 1's 1st Grandchild
                        <ul>
                            <li>Item 1's Grand Grandchild</li>
                        </ul>
                    </li>
                    <li>Item 1's 2nd Grandchild</li>
                    <li>Item 1's 3rd Grandchild</li>
                </ul>
            </li>
            <li>Item 1's 2nd Child</li>
            <li>Item 1's 3rd Child</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

CSS

li { padding-left: 10px; }
.level-1 { color: #880033; }
.level-2 { color: #000066; }
.level-3 { color: #000099; }
.level-4 { color: #0000BB; }

JavaScript

$("li").each(function() {
     $(this).addClass("level-" + ($(this).parents("li").length +1)); 
});