JSFiddle - React, Tailwind, and code Playground

HTML

<p>
<div><label for="size">Icon Size</label></div>
<div><input id="size" value="16"></div>
</p>
<p>
<div><label for="prefix">Class Prefix</label></div>
<div><input id="prefix" value=".icon-"></div>
</p>
<p>
<div><label for="lists">Icon Lists</label></div>
<div>
<textarea id="lists" rows="10" cols="60">
icon1, icon2, icon3
icon4, icon5, icon6
</textarea>
</div>
</p>
<p>
<button id="generate">Generate Classes</button>
</p>
<pre id="out"></pre>

CSS

body { font-family: Arial }

JavaScript

$("#generate").click(function () {
    var size = $("#size").val(),
        prefix = $("#prefix").val(),
        lists = $("#lists").val();
    
    var rows = lists.split(/\n/),
        out = [],
        top = 0;
    
    rows.forEach(function (row) {
        row = row.replace(/\s/g, "");
        
        if (!row.length) {
            return;
        }
        
        var names = row.split(","),
            left = 0;
        names.forEach(function (name) {
            out.push(prefix + name + " { background-position: " + left + "px " + top + "px; }");
            left -= size;
        });
        top -= size;
    });
    
    $("#out").text(out.join("\n"));
});