JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<button class="css">CSS Button</button>

<button class="sass">Sass Button</button>

<hr>

<button class="css alt">CSS Alt Button</button>

<button class="sass alt">Sass Alt Button</button>

SCSS

:root {
  --button-color: darkviolet;
}

$button-color: firebrick;

//$button-color: black;
// -----


button.css {
  padding: .5em 1em;
  border: .25em solid var(--button-color);
  border-radius: .5em;
  color: var(--button-color);
  background-color: transparent;
}

button.sass {
  padding: .5em 1em;
  border: .25em solid $button-color;
  border-radius: .5em;
  color: $button-color;
  background-color: transparent;
}


button.css.alt {
  --button-color: tomato;
}
  
button.sass.alt {
  border-color: tomato;
  color: tomato;
  

}