JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="foo">My h1 foo element</h1>
<h1 id="norm">Standard h1 element</h1>
<p>The above should be the same color</p>

CSS

:root{
    --main-color: #06c;
}

h1#foo  {
    color: var(--main-color);
}
h1#norm {
    color: #06c;    
}