JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

CSS

div {
    padding: 1em;
    margin: 1em;
    box-shadow: 0.2em 0.5em 1em #ccc;
}
.myClassSetByAttr {
    width: 200px;
    border: 1px solid black;
}
.myClassSetByProp {
    width: 300px;
    border: 6px double gold;
}

JavaScript

// For a, we only set the attribute
// For b, we set the attribute, then the property
// For c, we set only the property
$('#a,#b').attr('class', 'myClassSetByAttr');
$('#b,#c').prop('className', 'myClassSetByProp');

// Output the attribute then the property
$('#a,#b,#c').each(function(elt,i){
    var $this = $(this);
    $this.html(this.id + '<br />' + $this.attr("class") + '<br />' + $this.prop("className"));
});