JSFiddle - React, Tailwind, and code Playground

HTML

<div id="media-width-detection-element">
  <p>adddddddddddddddddddddddddddddddddddddddddd</p>
</div>

CSS

#media-width-detection-element {
        display: none;
        width: 0px;
    }
    @media (min-width: 768px) {
        #media-width-detection-element {
            width: 768px;
        }
    }
    @media (min-width: 992px) {
        #media-width-detection-element {
            width: 992px;
        }
    }
    @media (min-width: 1200px) {
        #media-width-detection-element {
            width: 1200px;
        }
    }

JavaScript

//<![CDATA[
    function xs() {
        alert("0");
        return $("#media-width-detection-element").css("width") === "0px";
    }
    function sm() {
        alert("768");
        return $("#media-width-detection-element").css("width") === "768px";
    }
    function md() {
        alert("992");
        return $("#media-width-detection-element").css("width") === "992px";
    }
    function lg() {
        alert("1200");
        return $("#media-width-detection-element").css("width") === "1200px";
    }
    //]]>