JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>

CSS

/* Works only in Chrome v85 */
@property --primary-color {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}

.box {
  width: 300px;
  height: 300px;
  background-image: linear-gradient(var(--primary-color), purple);
  transition: --primary-color 1s;
}

.box:hover {
  --primary-color: red;
}

JavaScript

//The JS method for registering a custom property
//Doesn't work yet in Firefox
/* window.CSS.registerProperty({
   name: "--primary-color",
   syntax: "<color>",
   inherits: false,
   initialValue: "blue",
}); */