JSFiddle - React, Tailwind, and code Playground

HTML

<div>DIV com fundo preto e letras vermelhas<br>em navegadores que suportam variáveis CSS</div>
<p>Parágrafo</p>
<ul>
    <li>Item1</li>
    <li>Item1</li>
    <li>Item1</li>
</ul>
<div>DIV com fundo preto e letras vermelhas<br>em navegadores que suportam variáveis CSS</div>

CSS

:root {	
    --minha-cor-fundo: black;
    --minha-cor: red;
    --minha-largura: 40%;
}

div {
    width: var(--minha-largura);    
    height: 100px;
    background-color: var(--minha-cor-fundo);
    color: var(--minha-cor);
} 
    
p {
    width: 30%;
    background-color: red;
    }