JSFiddle - React, Tailwind, and code Playground

HTML

<panel class="header">first <button>second</button> </panel>
<button>second</button>

CSS

/* encapsulated in first component */
panel {
  color: var(--panel-color, red);
  background: var(--panel-back-color, white);
}

/* encapsulated in button component */
button {
  color: var(--button-color, blue);
  background: var(--button-back, lime)
}

/* encapsulated in our component */
.header {
  --panel-color: lime;
  --panel-back-color: black;
}