JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <div class="lighter">$main-color-lighter</div>
    <div class="light">$main-color-light</div>
    <div>$main-color</div>
    <div class="dark">$main-color-dark</div>
    <div class="darker">$main-color-darker</div>
    <div class="gradient">Gradient</div>  
  </body>
</html>

SCSS

$main-color:         #FF0033;
$main-color-light:   lighten($main-color, 10%);
$main-color-lighter: lighten($main-color, 20%);
$main-color-dark:    darken($main-color, 10%);
$main-color-darker:  darken($main-color, 20%);

div {
  background:    $main-color;
  margin-bottom: 5px;
  padding:       5px;
  &.light {
    background: $main-color-light;
  }
  &.lighter {
    background: $main-color-lighter;
  }
  &.dark {
    background: $main-color-dark;
  }
  &.darker {
    background: $main-color-darker;
  }
  &.gradient {
    background: -webkit-linear-gradient(top, $main-color-light 0%, $main-color-dark 100%);
    padding:    10px 5px;
  }
}