JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav-menu" id="menu-main-navigation">
        <li class="menu-class">
            <a href="#12">Nav 1</a>
            <ul class="sub-menu">
                <li class="menu-class-3">
                    <a href="#12">Nav 2</a>
                    <ul class="sub-menu">
                        <li class="menu-class-2"><a href="#2">Anchor, it should be lowercase</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

Try to inspect the last li, you will see that it's not display:table-cell, so it works well. The problem is with the anchor inside it.

CSS

.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
  display: table-cell;
}

.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {
  text-transform: uppercase;
}