JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

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">
                <div>
                   <button>Should be black</button>
                </div>
                <div>
                    <div class="generalStyles">
                        <div>
                            <button>Should be red</button>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </section>
</div>

SCSS

div:not(.noGeneralStyles) {
  .generalStyles {
        button {
            color: red;
    }
  }
}