JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="line n1">Line 100</div>
<div class="line n2">Line 200</div>
<div class="line n3">Line 300</div>
<div class="line n4">Line 400</div>
<div class="line n5">Line 500</div>
<div class="line n6">Line 600</div>
<div class="line n7">Line 700</div>
<div class="line n8">Line 800</div>
<div class="line n9">Line 900</div>

<div class="line m1">Stoplight 1</div>
<div class="line m2">Stoplight 2</div>
<div class="line m3">Stoplight 3</div>
<div class="line m4">Stoplight 4</div>
<div class="line m5">Stoplight 5</div>
<div class="line m6">Stoplight 6</div>
<div class="line m7">Stoplight 7</div>
<div class="line m8">Stoplight 8</div>
<div class="line m9">Stoplight 9</div>

SCSS

@function color-weight($color, $weight: 400, $mixing: false) {
  @if type-of($color) == 'map' {
    $last-shade: null;
    $last-weight: null;
    @each $w, $shade in $color {
      @if $weight == $w {
        @return $shade;
      } @else if $weight < $w {
        @if $last-shade != null {
          @if $mixing {
            @return mix($last-shade, $shade, 100% * ($w - $weight) / ($w - $last-weight));;
          } @else {
            @return $last-shade;
          }
        } @else {
          @return $shade;
        }
      }
      $last-shade: $shade;
      $last-weight: $w;
    }
    @return $last-shade;
    
  } @else if type-of($color) == 'list' {
    $index: min(max(1, ceil($weight / 900 * length($color))), length($color));
    @return nth($color, $index);
  } @else {
    @return $color;
  }
}

$brand-red: (
  400: red,
  700: blue
);

.line {
  color: color-weight($brand-red);
}