JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      div {
        background-color: red;
      }
    </style>
  </head>
  <div class="test1">expected: not red</div>
  <div class="test2">expected: not red</div>
  
  
  <body>
    <script>
      function testStyle(rule) {
        var style = document.createElement('style');
        style.textContent = rule;
        document.head.appendChild(style);
        console.log('input', style.textContent);
        console.log('output', style.sheet.cssRules[0].cssText);
        //
        style.textContent = style.sheet.cssRules[0].cssText;
      }
      
      testStyle('.test1 { background: none; }');
      testStyle('.test2 {background-image none; background-color: initial; ' +
          'background-position: initial initial; background-repeat: ' +
          'initial initial;}');
    </script>
  </body>
</html>