JSFiddle - React, Tailwind, and code Playground

HTML

外层文本
<div class="container">
  顶层文本
  <div class="child">
    底层文本
  </div>
</div>

CSS

:root {
  --my-color: red;
}

.container {
  /* --my-color: blue; */
  color: var(--my-color);
}

.child {
  color: var(--my-color, blue);
}

JavaScript

const child = document.querySelector('.child')

console.log(getComputedStyle(child).getPropertyValue('--my-color'))

child.style.setProperty('--my-color', 'purple')