JSFiddle - React, Tailwind, and code Playground

CSS Broken Inheritance: This is how CSS currently works, and why it is confusing. We will fix this.

by nilloc

HTML

<div id="div1">
  <style>
    div{
      color:red; 
    }
  </style>
  div 1 (should be red)
  <div id="div2">
    <style>
      div{
        color:blue; /* This is where CSS is broken, the child div's style overrides the parent */
      }
    </style>
  </div>
  div 2 (should be blue)
</div>

CSS

div{
  border:1px solid gray;
}