JSFiddle - React, Tailwind, and code Playground

HTML

<div id="row" class="xs">
	<div class="test">
		Hello, World!
	</div>
</div>

<div id="log">
</div>

CSS

.xs .test {
  background-color: #ff0000;
}

.sm .test {
  background-color: #00ff00;
}

.md .test {
  background-color: #0000ff;
}

.lg .test {
  background-color: #ff00ff;
}

JavaScript

var xs = [-Infinity, 768];
var sm = [768, 992];
var md = [992, 1200];
var lg = [1200, Infinity];

var width;

$(window).resize(function() {
    
	width = $(this).width(); 
	mediaQuery(xs, sm, md, lg);
});
function consolelog(message){
    var element = $("#log");
    element.append(message);
}

function mediaQuery(xs, sm, md, lg)
{
    consolelog(width);
    if (width >= xs[0] && width < xs[1]) {
        consolelog("xs");
        hide_xs();
    }

    if (width >= sm[0] && width < sm[1]) {
        consolelog("sm");
        hide_sm();
    }

    if (width >= md[0] && width < md[1]) {
        consolelog("md");
        hide_md();
    }

    if (width >= lg[0] && width < lg[1]) {
        consolelog("lg");
        hide_lg();
    }
}

function hide_sm() {
    $('#row').removeClass().addClass('xs');
}

function hide_sm() {
    $('#row').removeClass().addClass('sm');
}

function hide_sm() {
    $('#row').removeClass().addClass('md');
}
function hide_lg() {
    $('#row').removeClass().addClass('lg');
}