JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<button class="button-1" type="button">I'm a button</button>
<button class="button-2" type="button">I'm a button</button>

SCSS

@function text-contrast($bg, $light: white, $dark: black) {
  $is-dark-bg: lightness($bg) < lightness(gray);
  @return if($is-dark-bg, $light, $dark);
}

@mixin button($bg) {
  color: text-contrast($bg);
  background: linear-gradient(lighten($bg, 8), darken($bg, 8));
}

.button-1 {
  @include button(blue);
}

.button-2 {
  @include button(pink);
}