JSFiddle - React, Tailwind, and code Playground

HTML

<p id="paragraph" style="color: white">
 I am a DIV
</p>

<p>
User styles:
</p>
<textarea id="textarea"></textarea>

CSS

#paragraph
{
  background: red;
}

textarea
{
  width: 300px;
  height: 400px;
}

JavaScript

var textarea = document.getElementById("textarea"),
    paragraph = document.getElementById("paragraph");

/**
 * Computes applied styles, assuming no rules targeting a specific element.
 */
function getNonDefaultStyles(el) {
	var styles = {},
  		computed = window.getComputedStyle(el),
      notTargetedContainer = document.createElement('div'),
      elVanilla = document.createElement(el.tagName);
  document.body.appendChild(notTargetedContainer);
  notTargetedContainer.appendChild(elVanilla);
  var vanilla = window.getComputedStyle(elVanilla);
  for (let key of computed) {
  	if (vanilla[key] !== computed[key]) {
    	styles[key] = computed[key];
    }
  }
  document.body.removeChild(notTargetedContainer);
	return styles;
}

var paragraphStyles = getNonDefaultStyles(paragraph);
for (let style in paragraphStyles) {
  textarea.value += style + ": " + paragraphStyles[style] + "\n";
}