JSFiddle - React, Tailwind, and code Playground

by shurikation

HTML

<div class="block-1"></div>

CSS

:root {
  '--main-color': blue;
}

.block-1 {
  width: 100px;
  height: 100px;
  background-color: var(--main-color);
}

JavaScript

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');


root.style.setProperty('--main-color', '#ffeead');

console.log(mainColor); // '#ffeead'