JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div class="class1">.class1</div>
        <div class="class1"><div class="class2">.class1 &gt; .class2</div></div>
        <div class="class1"><div class="class1 class2">.class1 &gt; .class1.class2</div></div>
    </body>
</html>

CSS

body {color: #fff; }
.class1 {background: #ccc; }
.class1 > .class1.class2 {background: #000; }
.class1 > .class2 {background: #999; }