JSFiddle - React, Tailwind, and code Playground
HTML
<div>Hello world!</div>
CSS
div{
height: 50px !important;
width:50px;
background-color:red !important;
color:green !important;
}
JavaScript
$.fn.extend({
cssi:function(obj){
var $target=this;
$.each(obj,function(i,e){
var initialVal=$target.css(i);
$target.css(i,e);
if($target.css(i)==initialVal){ //add !important only if the value didn't change
if(!isNaN(e)) e+="px";
e+=" !important";
$target.css(i,""); // clear any prior rules
$target[0].style.cssText+=camelToDash(i)+":"+e;
}
});
return this;
}
});
function camelToDash(str) {
return str.replace(/\W+/g, '-')
.replace(/([a-z\d])([A-Z])/g, '$1-$2')
.toLowerCase();
}
$(function(){
//Demo
$("div").cssi({
backgroundColor:"blue",
height:100,
width:100,
color:"red"
});
});