JSFiddle - React, Tailwind, and code Playground

HTML

<div class='c1 x'>1</div>
<br />
<div class='c2 x'>2</div>
<div class='c3 x'>3</div>

JavaScript

// version 1: add any css
var s = (function(){
	this.head = document.head || document.getElementsByTagName('head')[0];
  this.style = document.createElement('style');
  this.head.appendChild(this.style);
  
  this.addCSS = (css) => {
  	if ( this.style.styleSheet ) { this.style.styleSheet.cssText = css; }
  	else { this.style.appendChild( document.createTextNode(css) ); }
	};
  return this;
})();

s.addCSS('.x { position: relative; width: 50px; height: 50px; border: 1px solid gray; } .c1 { background: green; }');
s.addCSS('.c1 { border-width: 10px; }');


// version 2: shorter, but can only add one style selector at a time
var addCSS = (css) => { window.document.styleSheets[0].insertRule(css, window.document.styleSheets[0].cssRules.length); };
addCSS('.c2 { background: orange; position: relative; width: 50px; height: 50px; }');
addCSS('.c3 { background: red; position: relative; width: 50px; height: 50px; }');