JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="Actions">
    <button class="Button--dark">test</button>
    <button class="Button--secondary">secondary</button>
    <button class="Button">button</button>
</div>

<hr>

<div class="Actions">
    <button class="Button">test</button>
    <button class="Button--secondary">secondary</button>
</div>

SCSS

.Button {
    border: 1px solid silver;
    padding: 1rem;
    background-color: salmon;
    
    &--dark {
        @extend .Button;
        background-color: gray;
        border-color: black;
        color: white;
    }
    
    &--secondary {
        @extend .Button;
        background-color: yellow;
    }
    
    + .Button {
        margin-left: 3em;
    }
}