JSFiddle - React, Tailwind, and code Playground

by Weston Ruter

HTML

<form action="javascript:">
<textarea id="css" name="css" placeholder="body { ... }"></textarea><br>
<button type="submit" id="parse">Parse CSS</button>
</form>

JavaScript

document.querySelector( 'form' ).addEventListener( 'submit', function( event ) {
	var doc;
	event.preventDefault();
  doc = document.implementation.createHTMLDocument("");
  styleElement = document.createElement("style");

	styleElement.textContent = document.getElementById( 'css' ).value;
  // the style will only be parsed once it is added to a document
  doc.body.appendChild( styleElement );

  console.info( styleElement.sheet.cssRules );
} );

// doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);

// style = document.createElement( 'style' );
// style.textContent = 'body { color:red }';

//document.body.appendChild( style )
// console.dir( style );