JSFiddle - React, Tailwind, and code Playground

by Ian Oxley

HTML

<header id="main" class="foo">
    <h1>Main Heading</h1>
</header>

CSS

header {
    color: #000;
    font-family: Georgia, Serif;
}
.foo {
    color:red;
    font-size:200%;
}
.bar {
    color:blue;
    font-size:100%;
}

JavaScript

var el = document.getElementById('main');

var allClasses = el.className.split(/\s/);
for (var i = 0, length = allClasses.length; i < length; i++) {
	if (allClasses[i] === 'foo') {
		allClasses[i] = 'bar';
		break;
	}
}
	
el.className = allClasses.join(' ');