JSFiddle - React, Tailwind, and code Playground

HTML

<p id="out">
    test
</p>
<p id="out2">
    test2
</p>

CSS

@media (max-width: 200px) {
  .test {
    font-size:40px;
  }
}

JavaScript

function mediaEventListners(){
    var mq,i;
    if (matchMedia) {
        for(i=10; i<= 2000; i+=10) {
          mq = window.matchMedia("(max-width: " + i + "px)");
          mq.addListener(WidthChange);
        }
    }
}


function WidthChange(mq) {
    var el1 = document.getElementById("out"),
        el2 = document.getElementById("out2");
    el1.innerHTML = mq.media;
	  // el2.innerHTML = 'screen.width = ' + window.screen.width;
}