JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>


<div class="el bg-red-darker"></div>
<div class="el bg-red-dark"></div>
<div class="el bg-red"></div>
<div class="el bg-red-light"></div>
<div class="el bg-red-lighter"></div>
<div class="el bg-red-bright"></div>

<br>

<div class="el bg-green-darker"></div>
<div class="el bg-green-dark"></div>
<div class="el bg-green"></div>
<div class="el bg-green-light"></div>
<div class="el bg-green-lighter"></div>
<div class="el bg-green-bright"></div>

<br>

<div class="el bg-blue-darker"></div>
<div class="el bg-blue-dark"></div>
<div class="el bg-blue"></div>
<div class="el bg-blue-light"></div>
<div class="el bg-blue-lighter"></div>
<div class="el bg-blue-bright"></div>

<br>

<div class="el bg-yellow-darker"></div>
<div class="el bg-yellow-dark"></div>
<div class="el bg-yellow"></div>
<div class="el bg-yellow-light"></div>
<div class="el bg-yellow-lighter"></div>
<div class="el bg-yellow-bright"></div>

<br>

<div class="el bg-cyan-darker"></div>
<div class="el bg-cyan-dark"></div>
<div class="el bg-cyan"></div>
<div class="el bg-cyan-light"></div>
<div class="el bg-cyan-lighter"></div>
<div class="el bg-cyan-bright"></div>

<br>

<div class="el bg-magenta-darker"></div>
<div class="el bg-magenta-dark"></div>
<div class="el bg-magenta"></div>
<div class="el bg-magenta-light"></div>
<div class="el bg-magenta-lighter"></div>
<div class="el bg-magenta-bright"></div>

<br>

<div class="el bg-orange-darker"></div>
<div class="el bg-orange-dark"></div>
<div class="el bg-orange"></div>
<div class="el bg-orange-light"></div>
<div class="el bg-orange-lighter"></div>
<div class="el bg-orange-bright"></div>

<br>

<div class="el bg-violet-darker"></div>
<div class="el bg-violet-dark"></div>
<div class="el bg-violet"></div>
<div class="el bg-violet-light"></div>
<div class="el bg-violet-lighter"></div>
<div class="el bg-violet-bright"></div>

<br>

<div class="el bg-grey-darker"></div>
<div class="el...

SCSS

@function color($c, $op: 1) {
  
  @if map-has-key($colors, $c) {
    $color: map-get($colors, $c);
    @return rgba($color, $op);
  }
  
  @return transparent;
}

@function getShade($color, $n, $s) {
  
  @if $n > 0 {
    @return saturate(lighten($color, $n * 10%), $s * 10%);
  } @else {
    @return saturate(darken($color, ($n - $n * 2) * 10%), $s * 10%);
  }
  
}

$colors: ();

$color_settings: (
  red: (
    base: #e42330,
    shades: (
      lighter: (
        amount: 3,
        saturation: 3
      ),
      light: (
        amount: 2,
        saturation: 2
      ),
      dark: (
        amount: -1.5,
        saturation: 0.5
      ),
      darker: (
        amount: -3,
        saturation: 2
      ),
      bright: (
        amount: 0.5,
        saturation: 2.5
      )
    )
  ),
  green: (
    base: #2e854f,
    shades: (
      lighter: (
        amount: 4.5,
        saturation: 1
      ),
      light: (
        amount: 3,
        saturation: 0.5
      ),
      dark: (
        amount: -1,
        saturation: 0.5
      ),
      darker: (
        amount: -2,
        saturation: 1.5
      ),
      bright: (
        amount: 1,
        saturation: 3.5
      )
    )
  ),
  blue: (
    base: #4579ac,
    shades: (
      lighter: (
        amount: 3.5,
        saturation: 1
      ),
      light: (
        amount: 2,
        saturation: 0.5
      ),
      dark: (
        amount: -1.5,
        saturation: 1
      ),
      darker: (
        amount: -2.5,
        saturation: 1.5
      ),
      bright: (
        amount: 0.5,
        saturation: 6
      )
    )
  ),
  yellow: (
    base: #91711e,
    shades: (
      lighter: (
        amount: 5,
        saturation: 5
      ),
      light: (
        amount: 3.5,
        saturation: 1
      ),
      dark: (
        amount: -1,
        saturation: 1.5
      ),
      darker: (
        amount: -2,
        saturation: 5
      ),
      bright: (
        amount: 2,
        saturation: 5
      )
    )
  ),
  cyan: (
    base:...