JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<div>Test</div>

JavaScript

/**
 * Add a stylesheet rule to the document (may be better practice, however,
 *  to dynamically change classes, so style information can be kept in
 *  genuine styesheets (and avoid adding extra elements to the DOM))
 *
 * @param {Array} rules Accepts an array of JSON-encoded declarations
 * @example
addStylesheetRules({
  'h2': {
    'color': 'red',
    'background-color': ['green', true] // 'true' for !important rules 
  }, 
  '.myClass': {
    'background-color': 'yellow'
  }
});
 */
function addStylesheetRules (rules) {
  var styleEl = document.createElement('style');
  document.head.appendChild(styleEl);
  // Apparently some version of Safari needs the following line? I dunno.
  styleEl.appendChild(document.createTextNode(''));
  var s = styleEl.sheet;
  for(var selector in rules) {
    var props = rules[selector];
    var propStr = '';
    for(var propName in props) {
      var propVal = props[propName];
      var propImportant = '';
      if(propVal[1] === true) {
        // propVal is an array of value/important, rather than a string.
        propVal = propVal[0];
        propImportant = ' !important'
      }
      propStr += propName + ':' + propVal + propImportant + ';\n';
    }
    s.insertRule(selector + '{' + propStr + '}', s.cssRules.length);
  }
}

addStylesheetRules({
    'div': {
        '@-webkit-keyframes': 'test'
    }
});