JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sentence" class="wp-one wp-two wp-small">fdgbfbfnghn</div>

<button id="button">CHANGE CLASS</button>

CSS

.wp-small{
 color: #f00;   
}
.wp-medium{
 color: #0f0;   
}
.wp-large{
    color: #00f;
}

JavaScript

var size = ['small', 'medium', 'large'];
var button = document.getElementById("button");
var id= document.getElementById("sentence");
var i = 0;
button.onclick = function(){
    sentence.classList.remove("wp-"+size[i]);
    (i == size.length - 1) ? i = 0 : i++;
    sentence.classList.add("wp-"+size[i]);
}