JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<button class="button -blue-100">123</button>
<button class="button -blue-200">123</button>
<button class="button -blue-300">123</button>
<button class="button -blue-400">123</button>
<button class="button -blue-500">123</button>
<button class="button -blue-600">123</button>
<button class="button -blue-700">123</button>
<button class="button -blue-800">123</button>
<button class="button -blue-900">123</button>

SCSS

$color-modifiers: (
blue-100: #feffff,
blue-200: #d8e3f4,
blue-300: #a8c5f1,
blue-400: #6da2f6,
blue-500: #5f84be,
blue-600: #506a93,
blue-700: #41536e,
blue-800: #333e4f,
blue-900: #1d2129
);

@mixin --color($colors: map-keys($color-modifiers)) {
  @each $label in $colors {
    $color: map-get($color-modifiers, $label);
    $text: white;
    @if (length($color) > 1) {
      $text: nth($color, 2);
      $color: nth($color, 1);
    } @else {
      @if red($color)*0.299 + green($color)*0.587 + blue($color)*0.114 > 160 {
        $text: black;
      }
    }
    
    &.-#{$label} {
      color: $text;
      background-color: $color;
    }
  }
}


.button {
  border: 2px solid;
  
  @include --color;
}