JSFiddle - React, Tailwind, and code Playground

HTML

<div class="generalStyles">
    <button>Should be red</button>
    <div class="noGeneralStyles">
        <button>Should be black</button>
        <div class="generalStyles">
            <button>Should be red</button>
        </div>
    </div>
    <!-- some hierarchy to test deeper nesting -->
    <section>
        <div>
            <div class="noGeneralStyles">
                <button>Should be black</button>
                <div>
                    <div class="generalStyles">
                        <button>Should be red</button>
                    </div>
                </div>
            </div>            
        </div>
    </section>
</div>

SCSS

.noGeneralStyles > button {
    color: black;
}
.generalStyles > button {
    color: red;
}