JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">Hello StackOverflow</div>

SCSS

:root {
  $colours:(
    "gray-500": #f7fafc,
    "red-500": #f56565,
    "green-500": #48bb78
  );

  @each $key_name, $value in $colours {
    --#{$key_name}: #{$value};
  }
}

div#one {
  width: 200px;
  height: 200px;
  background: var(--red-500) // works
  /* background: lighten(var(--color), 40); */ // doesn't work
}