JSFiddle - React, Tailwind, and code Playground

by ThibautSF

HTML

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select id="testing" style="width: 500px;" multiple>
  <option value="tag1">Tag1</option>
  <option value="tag2">Tag2</option>
</select>

CSS

span.custom {
  color: orange;
}

span.normal {
  color: green;
}

JavaScript

$(function () {
    $("#testing").select2({
        tags: true,
        tokenSeparators: [","],
        templateSelection: function (state) {
            let stateTemplate = $("<span></span>");

            if (state.newTag) {
                stateTemplate.addClass("custom");
            } else {
                stateTemplate.addClass("normal");
            }

            // Use .text() instead of HTML string concatenation to avoid script injection issues
            stateTemplate.text(state.text);

            return stateTemplate;
        },
        createTag: function (params) {
            let term = jQuery.trim(params.term);

            if (term === "") {
                return null;
            }

            return {
                id: term,
                text: term,
                newTag: true, // add additional parameters
            };
        },
    });

    $("#testing").val(["tag1", "customTag"]).trigger("change");
});