JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<div class="test">
  Hello World
</div>
<div class="test2">
  Hello World
</div>

CSS

:root {
  --h: 209;
  --s: 28%;
  --l: 30%;
  --a: 1;
}

.test {
  background: hsl(var(--h), var(--s), var(--l), var(--a));
}

.test:hover {
  --l: 60%;
}

.test2 {
  --h: 105;
  --s: 12%;
  --l: 22%;
  --a: 1;
}

.test2 {
  background: hsl(var(--h), var(--s), var(--l), var(--a));
}

.test2:hover {
  background: hsl(var(--h), var(--s), calc(var(--l)*2), var(--a));
}