JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<input id="btn1" type="button" value="变行间"/>
	<input id="btn2" type="button" value="变class"/>
	<div id="box1"></div>
</body>
<!-- 先点"变class"再点"变行间"，最后再点"变class"即可看到理想效果，要是最先点了"变行间"，再点"变class"就看不到后者的效果了 -->

CSS

#box1{
    width: 100px;
    height: 100px;
    border: 3px solid black;
}
.blue{
    background-color: blue;
}

JavaScript

var box = document.getElementById("box1");
var btn1= document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function () {
    box.style.background = "red";
}
btn2.onclick = function () {
    box.className = ("blue");
}