JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Adding CSS-rules globally</h1>


<div><p>This should be blue </p></div>
<p>and this should be strike-through and red too like the heading </p>


<pre>
$.style.insertRule(['p','h1'],'color:red;');
$.style.insertRule(['p'],'text-decoration:line-through;');
$.style.insertRule(['div p'],'text-decoration:none;color:blue');
</pre>

JavaScript

(
  function( $ )
  {
    $.style={
              insertRule:function(selector,rules,contxt)
              {
                var context=contxt||document,stylesheet;
                
                if(typeof context.styleSheets=='object')
                {
                  if(context.styleSheets.length)
                  {
                    stylesheet=context.styleSheets[context.styleSheets.length-1];
                  }
                  if(context.styleSheets.length)
                  {
                    if(context.createStyleSheet)
                    {
                      stylesheet=context.createStyleSheet();
                    }
                    else
                    {
                      context.getElementsByTagName('head')[0].appendChild(context.createElement('style'));
                      stylesheet=context.styleSheets[context.styleSheets.length-1];
                    }
                  }
                  if(stylesheet.addRule)
                  {
                    for(var i=0;i<selector.length;++i)
                    {
                      stylesheet.addRule(selector[i],rules);
                    }
                  }
                  else{
                    stylesheet.insertRule(selector.join(',') + '{' + rules + '}', stylesheet.cssRules.length);  
                  }
                }
              }
            }; 
  }
)( jQuery );



$(document).ready(
    function()
    {
        $.style.insertRule(['p','h1'],'color:red;');
        $.style.insertRule(['p'],'text-decoration:line-through;');
        $.style.insertRule(['div p'],'text-decoration:none;color:green');
     }
);