JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<script src="http://github.com/cowboy/javascript-debug/raw/master/ba-debug.min.js"></script>
<div id="output">
</div>
<div id="test">test area</div>

CSS

#test {
    width: 100px;
    height: 100px;
    background-color: #000;
    border: 2px dotted #000;
}
#test.test {
    background-color: #f00;
}
#test.test2 {
    background-color: #fff !important;
}

JavaScript

var t = $('#test');
    $('#output').append('<hr><h2>case 1, basic css style rule <code>background-color: #000</code></h2>');
    $('#output').append('<p>background-color returns: '+t.css('background-color')+'</p>');
    $('#output').append('<p>backgroundColor returns: '+t.css('backgroundColor')+'</p>');
    t.addClass('test');
    
  $('#output').append('<hr><h2>case 2, add class with <code>background-color: #f00</code></h2>');
    $('#output').append('<p>background-color returns: '+t.css('background-color')+'</p>');
    $('#output').append('<p>backgroundColor returns: '+t.css('backgroundColor')+'</p>');
    t.css('backgroundColor', '#0f0');
    
  $('#output').append('<hr><h2>case 3, set new color with jquery, camel-cased property<code>.css(&quot;backgroundColor&quot;, &quot;#0f0&quot;)</code></h2>');
    $('#output').append('<p>background-color returns: '+t.css('background-color')+'</p>');
    $('#output').append('<p>backgroundColor returns: '+t.css('backgroundColor')+'</p>');
    t.css('background-color', '#00f');
    
  $('#output').append('<hr><h2>case 4, set new color with jquery, hyphened property <code>.css(&quot;background-color&quot;, &quot;#00f&quot;)</code></h2>');
    $('#output').append('<p>background-color returns: '+t.css('background-color')+'</p>');
    $('#output').append('<p>backgroundColor returns: '+t.css('backgroundColor')+'</p>');
    t.addClass('test2');
    
  $('#output').append('<hr><h2>case 5, add class with !important rule <code>background-color: #fff !important;</code></h2>');
    $('#output').append('<p>background-color returns: '+t.css('background-color')+'</p>');
    $('#output').append('<p>backgroundColor returns: '+t.css('backgroundColor')+'</p>');
    t.css('backgroundColor', '#0f0');
    
  $('#output').append('<hr><h2>case 6, set new color with jquery, camel-cased property<code>.css(&quot;backgroundColor&quot;, &quot;#0f0&quot;)</code></h2>');
    $('#output').append('<p>background-color returns:...