JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<div class="container theme">
  <div class="cell">cell1</div>
  <div class="cell">cell2</div>
  <div class="cell">cell3</div>
  <div class="cell">cell4</div>
</div>

CSS

.theme * {
  --public-color: #00f
}

.container {
  --internal-color: var(--public-color, #000);
}

.cell {
  color: var(--internal-color);
}

/* ------------- */

.theme .cell:first-child {
  --public-color: red;
}