JSFiddle - React, Tailwind, and code Playground

HTML

<button class="primary outline-button">primary button</button>

<button class="secondary outline-button">secondary button</button>

<button class="outline-button">default</button>

CSS

.outline-button {
  --color: gray;
  border: 3px solid var(--color);
  color: var(--color);
  background-color: transparent;
  padding: .25rem .5rem;
  border-radius: .5rem;
}
  .outline-button:hover {
    background-color: var(--color);
    color: #fff;
  }


.primary.outline-button {
  --color: blue;
}

.secondary.outline-button {
  --color: orange;
  
  :matches()
}