JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<button class="button">Hello</button>

SCSS

$red-100: #fad8d4 !default;
$red-200: #fcbab2 !default;
$red-300: #fe978b !default;
$red-400: #eb6257 !default;
$red-500: #b1534a !default;
$red-600: #80423b !default;
$red-700: #532f2b !default;
$red-800: #402622 !default;
$red-900: #251614 !default;

$reds: $red-100 $red-200 $red-300 $red-400 $red-500 $red-600 $red-700 $red-800 $red-900;

@function shade-lighter($color) {
  @return nth($reds, index($reds, $color) - 1);
}
@function shade-darker($color) {
  @return nth($reds, index($reds, $color) + 1);
}

.button {
  background-color: $red-400;
  color: white;
  
  &:hover {
    background-color: shade-lighter($red-400);
  }
}