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(--color, red);
  background: var(--back-color, white);
}

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

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