JSFiddle - React, Tailwind, and code Playground

HTML

<p>colour</p>
<a href="javascript:toggle();">toggle</a>

CSS

p { color : red; }
@media (max-width: 320px) {
    p { color: blue; }
    .force_red {
        color: red;
    }
}
@media (max-width: 480px) and (min-width: 320px) {
    p { color: green; }
    .force_blue p {
        color: green;
    }
}
.force_blue p {
    color: blue;
}

JavaScript

window.toggle = function () {
    document.body.className = "force_blue";
}