JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<p> I'm green because I got my color from root</p>
<div>I got blue from div selector</div>
<div class="error">
    I'm red because of the .error rule
    <p>Another red here because of inheritance!</p>
</div>

CSS

:root { --text-color: green; }
div { --text-color: blue; }
.error { --text-color: network; }

* {
  color: var(--text-color);
}