JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result">...</div>

JavaScript

string = 'padding:0px 0px 0px 0px;margin:0px auto 0px auto;background-color:color_9;color_10;color_5;color_4;color_1;';
var palettes = {
  "theme": "{\"color_10\":\"#454545\",\"color_2\":\"#40b1e2\",\"color_3\":\"#efefef\",\"color_4\":\"#fafafa\",\"color_5\":\"#cccccc\",\"color_6\":\"#e91e63\",\"color_7\":\"#e91e63\",\"color_8\":\"#e74c3c\",\"color_9\":\"#2c3e50\",\"color_1\":\"#344957\"}"
}
String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

function replaceAll(str, map){
    for(key in map){
        str = str.replaceAll(key, map[key]);
    }
    return str;
}


function PaletteColor(css) {
var $palette = JSON.parse(palettes.theme);
css = replaceAll(css,$palette)

return css;

  if (css.indexOf('color_') !== -1) {

    var $palette = JSON.parse(palettes.theme);

    $.each($palette, function(name, color) {
     // css = css.replace(new RegExp(name, 'g'), color);
      css = css.split(name).join(color);
    });

  }

  return css;
}
$('#result').html(PaletteColor(string));