JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<div class="parent is-active">
  <div class="children"></div>
</div>

SCSS

.parent {
  width: 200px;
  height: 200px;
}

.children {
  height: 100px;
  width: 100px;
  
  .is-active & {
    background: red;
  }
  
  :hover > & {
    background: blue;
  }
}