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;
}

p {
  font-weight: bold;
}

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

JavaScript

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

function getFrameDoc(frame) {
	return (frame.contentWindow
  		? frame.contentWindow.document
      : frame.contentDocument
  );
}

/**
 * Computes applied styles, assuming no rules targeting a specific element.
 */
function getNonDefaultStyles(el) {
	var styles = {},
  		computed = window.getComputedStyle(el),
      notTargetedContainer = document.createElement('iframe'),
      elVanilla = document.createElement(el.tagName);
  // append iframe to page, put vanilla element inside, retrieve styles
  document.body.appendChild(notTargetedContainer);
  var containerDoc = getFrameDoc(notTargetedContainer);
  // ensure that iframe is rendered in standards mode
  containerDoc.write('<!DOCTYPE html><meta charset=utf-8><title>temporary</title><body>');
  containerDoc.body.appendChild(elVanilla);
  // ensure that there is some content, so that e.g. margin is applied
  elVanilla.textContent = 'foo';
  var vanilla = notTargetedContainer.contentWindow.getComputedStyle(elVanilla);
  // compare vanilla styles to computed styles, list differences
  for (let key of computed) {
  	if (vanilla[key] !== computed[key]) {
    	styles[key] = computed[key];
    }
  }
  // clean up temporary element
  document.body.removeChild(notTargetedContainer);
	return styles;
}

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