JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<button class='background-color-vibrant'>Nicks</button>

SCSS

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

button{
  text: blue;
  @at-root a.#{&}{
    text: blue;
  }
}
  
  $background-color: #6f7dbc;
  
  .background-color{
    background-color: $background-color;
    
    &-vibrant{
      background-color: saturate($background-color,33%);
    }
    
    &-dull{
      background-color: desaturate($background-color,33%);
    }
    
    & &-matching{
      text: complement($background-color);
    }
    
  }