JSFiddle - React, Tailwind, and code Playground

HTML

<p>I am default text</p>
  <p class="red">I am red text</p>
  <p class="green">I am green text</p>
  <p class="blue">I am blue text</p>
  <p class="red">I am green text</p>  
  <p id="no-class">I am blue text without class but with id</p>
  <p>I am default text</p>

CSS

:root {
  --color_main: black;
  --color_main_bg: white;
  --color_selection: white;
  --color_selection_bg: blue;
}

p {
  color: var(--color_main);
  background-color: var(--color_main_bg);
}

p::selection {
  color: var(--color_selection);
  background-color: var(--color_selection_bg);
}

.red {
  --color_main: red;
  --color_selection: lightsalmon;
  --color_selection_bg: darkred;
}
.green {
  --color_main: green;
  --color_selection: lime;
  --color_selection_bg: darkslategray;
}
.blue {
  --color_main: blue;
  --color_selection: skyblue;
  --color_selection_bg: darkslateblue;
}

JavaScript

const element = document.querySelector("#no-class");
element.style.setProperty("--color_main", "rebeccapurple");
element.style.setProperty("--color_selection", "turquoise");
element.style.setProperty("--color_selection_bg", "steelblue");