JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/codler/jQuery-Css3-Finalize/master/jquery.css3finalize.min.js"></script>
<p>Test your css on the left side, and nessesary prefixes will output on the right side.</p>
<textarea id="test" class="live-test">
@keyframes scale {
  from { transform: scale(1) }
  to { transform: scale(3) }    
}
.test:input-placeholder {
content: "transform";
  border-radius: 1px solid #000;
  display: flex;
  background-image: linear-gradient(#000000,#ffffff);
  transform: hej;
  content: "\0020" ;
  transition: all 1s !important;
}
@media all and (orientation:portrait) {
  body { transform: eh; }
}

a[href]:after { 
transform:g;
content: " (" attr(href) ")";
transform:d;
 }

@page { margin: 0.5cm; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
</textarea>
<textarea id="output" class="live-test"></textarea>

<hr />

<p>Test from style-tag</p>

<div id="a" class="style box round">Border radius (style-tag)</div>
<div class="style box round-top-left">Border top left radius (style-tag)</div>
<div class="style box shadow">Box shadow (style-tag)</div>
<div class="style box transform">Transform (style-tag)</div>
<div class="style box transition">Transition:hover (style-tag)</div>
<div class="style box jquery-transform">Jquery CssHooks (style-tag)</div>
<div class="style box gradient">Gradient (style-tag)</div>

<hr />

<p>Test parse</p>
<textarea class="test">
/* Test comment */
/* /* 
*/
/* */
/**/
</textarea>
<br />
<textarea class="test">
/* Test empty blocks */
#empty {}
#empty2 { }
#empty3{}
</textarea>
<br />
<textarea class="test">
/* Test colon in values */
.box_gradient {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
    background-color: #444444;
    background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /*...

CSS

body {
    background-image: url("https://github.com/codler/jQuery-Css3-Finalize/raw/master/test/bg.jpg");
}
textarea {
    width: 200px;
    height: 100px;
}
.live-test {
    width: 300px;
    height: 300px;
}
.style.box {
    background-color: rgba(255,255,255, 0.3);
    background-origin: padding-box;
    display: inline-block;
    padding: 10px;
    margin: 20px;
    height: 100px;
    width: 100px;
}
.style.box.round {
    border-radius: 10px;
}
.style.box.round-top-left {
    border-top-left-radius: 10px;
}
.style.box.shadow {
    box-shadow: 10px 10px 5px #888;
}
.style.box.transform {
    transform: scale(0.7);
}
.style.box.transition:hover {
    margin-left: 100px;
    transition: all .5s ease-in-out;
}
.style.box.gradient {
    background-image: linear-gradient(#ffffff, #000000);
    opacity: 0.5;
}

JavaScript

window.cssFinalize=false;
jQuery(function() { $.cssFinalize(); });
jQuery(function($) { 
    $('#test').keyup(function () {
        $.cssFinalize({
            'node' : this,
            'append' : false,
            'callback': function(css) { 
                this.removeClass('css-finalize-read');
                $('#output').val($.cssFinalize.cssObjToText(css, true));
            }
        
        }); 
    
    }).trigger('keyup');

    $('.test').cssFinalize({
        'append' : false,
        'callback': function(css) {
            $('<textarea>').insertAfter(this).val($.cssFinalize.cssObjToText(css, true));
        }
    }); 
});


$(function($) { 
    $('.jquery-transform').css({
        'transform' : 'rotate(45deg)'
    });
});