JSFiddle - React, Tailwind, and code Playground

by ingomc

HTML

<h1>
  This is a colored H1
</h1>

<p>
  We change the <strong>variable</strong> only in this p-tag.
  <br />
  And this is a <a href="#">link</a>
</p>

CSS

:root {
  --color: red;
}
h1 {
  color:var(--color);
}
p strong {
  color:var(--color);
  background-color: var(--bg-color);
}
a {
  background-color:var(--color);
  color:white;
}


body {
  font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

JavaScript

var body = document.querySelector('body');

/* Change css variable via vanilla js */
body.style.setProperty("--color", "blue");

/* Set a new css variable to root */
body.style.setProperty("--bg-color", "silver");