JSFiddle - React, Tailwind, and code Playground

by smallworld

HTML

This jsFiddle is somewhat of a representative scenario of the much more complex problem I am trying to solve. Problem I am running into is that CSS classes are assigned dynamically at various levels based on tenant's preferences in a multi-tenant platform. 

<div class="testClass1" style="margin:20px;">
  <div class="title">Expect this title to be GREEN</div>
</div>

<div class="testClass2" style="margin:20px;">
  <div class="testClass1">
    <div class="title">Expect this title to be GREEN</div>
  </div>
</div>

<div class="testClass1">
    <div class="testClass2" style="margin:20px;">
      <div class="testClass1">
        <div class="title">Expected this title to be GREEN, but it ends up being RED.</div>
      </div>
    </div>
</div>

<div class="testClass2" style="margin:20px;">
  <div class="title">Expect this title to be RED</div>
</div>

<div class="testClass1" style="margin:20px;">
  <div class="testClass2">
    <div class="title">Expect this title to be RED</div>
  </div>
</div>

CSS

.testClass1 .title,   
    .testClass2 .testClass1 .title { color:green;font-size:14px; } 
.testClass2 .title, 
    .testClass1 .testClass2 .title { color:red;font-size:24px; }