JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="foo -selected">
  <p class="foo_bar">hello</p>
  
  <div class="foo">
    <p class="foo_bar">there</p>
  </div>
</div>

SCSS

.foo {
  border: 10px solid red;
  display: block;
  background: orange;
  
  .foo_bar {
    font-weight: bold;
    padding: 0 1rem;
  }
  
  &.-selected {
    background: navy;
    
    & > .foo_bar {
      color: white;
    }
  }
}