JSFiddle - React, Tailwind, and code Playground

HTML

<div style="color: green">
    <ul class="my-list">
      <li>No content in this branch
        <ul>
          <li>Empty leaf node</li>
        </ul>
      </li>
      <li>No content in this one either</li>
      <li class="sub-has-contents">There is content in this branch (3 items)
        <ul>
          <li class="has-contents">There is some content is this leaf node (1 item)</li>
          <li class="has-contents">More content here (2 items)</li>
          <li>But nothing here</li>
          <li class="has-contents">More content here (2 items)</li>
            <li>But nothing here</li>
            <li>But nothing here</li>
            <li>But nothing here</li>
            <li class="has-contents">More content here (2 items)</li>
        </ul>
      </li>
    </ul>
</div>

CSS

.sub-has-contents li {
    color:green;
}
.sub-has-contents .has-contents {
    font-weight: bold;
    color: blue;
}
.sub-has-contents{
    color: blue;
}