JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="foo">
<li class="test">
test
</li>
</ul>

<ul>
<li class="test">
test2
</li>
</ul>


<ul>
<li class="foo test">
test3
</li>
</ul>

CSS

.foo {
  color: yellow;
}
.test {
  color: red;
}
.foo.test {
  color: blue;
}
.foo .test {
  color: green;
}