JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
  <li class="level0"><a href="#">Category</a></li>
  <li class="level0"><a href="#">Category</a></li>
  <li class="level0 active">
    <a href="#">Category Name</a>
    <ul class="level0">
      <li class="level1">
        <a href="#">Sub-category</a>
      </li>
      <li class="level1 active">
        <a href="#">Should be styled if no children are .active</a>
        <ul class="level1">
          <li class="level2 active">
            <a href="#">I only want this link styled</a>
          </li>
        </ul>
      </li>
      <li class="level1">
        <a href="#">Sub-category</a>
        <ul class="level1">
          <li class="level2">
            <a href="#">More nesting</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="level0"><a href="#">Category</a></li>
</ul>

<hr />

<ul class="nav">
  <li class="level0"><a href="#">Category</a></li>
  <li class="level0"><a href="#">Category</a></li>
  <li class="level0 active">
    <a href="#">Category Name</a>
    <ul class="level0">
      <li class="level1">
        <a href="#">Sub-category</a>
      </li>
      <li class="level1 active">
        <a href="#">This should now be styled</a>
        <ul class="level1">
          <li class="level2">
            <a href="#">This no longer has active class</a>
          </li>
        </ul>
      </li>
      <li class="level1">
        <a href="#">Sub-category</a>
        <ul class="level1">
          <li class="level2">
            <a href="#">More nesting</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="level0"><a href="#">Category</a></li>
</ul>

CSS

.nav .active:last-child > a {
    color: green;
    background-color: #ccc;
}