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;
}