JSFiddle - React, Tailwind, and code Playground

by Alexander Lashchevsky

HTML

<div>
  <a class="button" href="#">Button</a>
</div>

SCSS

:root {
  --btn-color: #ff0000;
  --btn-color-hover: darken(#ff0000, 5);
}
.button {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 5px;
  background: var(--btn-color);
  color: #fff;
  text-decoration: none;
  
  &:hover {
    background: --btn-color-hover;
  }
}