JSFiddle - React, Tailwind, and code Playground
HTML
<div class="full-band">
<div class="inner-wrapper setspacing-margin-right-left-50px">
<h3 class="setspacing-padding-30px">Bleep Blorp!</h3>
</div>
</div>
JavaScript
$("[class*='setspacing']").each(function(){
var classList = $(this).attr('class').split(" ");
for (var i = classList.length - 1; i >= 0; i--) {
if (classList[i].indexOf("setspacing") >= 0) {
var splitName = classList[i].split("-");
var cssName=null, cssValue=null;
var cssObject = {}; /*
padding : "inherit",
paddingBottom : "inherit",
paddingLeft : "inherit",
paddingRight : "inherit",
paddingTop : "inherit",
margin : "inherit",
marginBottom : "inherit",
marginLeft : "inherit",
marginRight : "inherit",
marginTop : "inherit"
};*/
for (var j = 1; j < splitName.length-1; j++) {
if (splitName.length<=3) {
cssName = splitName[1];
} else {
if(j==1) continue;
part = splitName[j].substring(0,1).toUpperCase() + splitName[j].substring(1);
cssName = splitName[1]+part;
};
cssValue = splitName[splitName.length-1];//+" !important";
cssObject[cssName] = cssValue;
};
console.log(JSON.stringify(cssObject)); // EDIT : Added after comment
$(this).css(cssObject);
};
};
});