JSFiddle - React, Tailwind, and code Playground
CSS
.test {
background: green;
}
JavaScript
(function () {
var apollo = {};
var hasClass, addClass, removeClass, toggleClass;
if ('classList' in document.documentElement) {
hasClass = function () {
return elem.classList.contains(className);
};
addClass = function (elem, className) {
elem.classList.add(className);
};
removeClass = function (elem, className) {
elem.classList.remove(className);
};
toggleClass = function (elem, className) {
elem.classList.toggle(className);
};
} else {
hasClass = function (elem, className) {
return new RegExp('(^|\\s)' + className + '(\\s|$)').test(elem.className);
};
addClass = function (elem, className) {
if (!hasClass(elem, className)) {
elem.className += (elem.className ? ' ' : '') + className;
}
};
removeClass = function (elem, className) {
if (hasClass(elem, className)) {
elem.className = elem.className.replace(new RegExp('(^|\\s)*' + className + '(\\s|$)*', 'g'), '');
}
};
toggleClass = function (elem, className) {
(hasClass(elem, className) ? removeClass : addClass)(elem, className);
};
}
apollo.hasClass = hasClass;
apollo.addClass = addClass;
apollo.removeClass = removeClass;
apollo.toggleClass = toggleClass;
window.apollo = apollo;
})();
apollo.addClass(document.body, 'test');