JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <button class="child">Test</button>
</div>


<h1>
• The green should turn red on direct click on itself
</h1>

<h1>
• The green should stay green on button click
</h1>

SCSS

.parent{
  width: 100px;
  height: 100px;
  background: green;
}
.parent:active{
  bavkground: red;
}

.child:active{
  background: lightblue;
}

.child {
    &:active{
        @at-root .parent:active {
            background: green;
        }
    }
}