JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test1"></div>
<div id="test2" class="class1"></div>

CSS

div {
    width: 100px;
    height: 100px;
    background: green;
}
.class1 {
    background: red;
}
.class2 {
    border: 2px solid blue;
}
.class3 {
    width: 200px;
}

JavaScript

Element.prototype.hasClass = function(name){
    return RegExp('(\\s|^)' + name, 'g').test(this.className);
};
Element.prototype.addClass = function(name){
    if(!this.hasClass(name))
        this.className += (this.className ? ' ' : '') + name;
};
Element.prototype.removeClass = function(name){
    this.className = name ? this.className.replace(RegExp('\\s?' + name, 'g'), '') : '';
};


var t1 = document.getElementById('test1');
t1.addClass('class1');
t1.addClass('class3');

var t2 = document.getElementById('test2');
t2.removeClass('class1');
t2.addClass('class2');