JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>sanity: <span id="sanity"></span>

    </li>
    <li>width: <span id="width"></span>

    </li>
    <li>device-width: <span id="device-width"></span>

    </li>
</ul>

JavaScript

var s = "";
for (var i = 0; i < 4096; i++) {
    var dev = i % 2 ? "device-" : "";
    s += "\n @media all and ( min-" + dev +
        "width:" + i / 2 +
        "px) {\n#" + dev + "width:before {\ncontent:'" + Math.floor(i / 2) +
        "';\n}}\n";
}
s += "\n#sanity:before{content:'youbet';display:inline;}\n";
s = encodeURIComponent(s);
console.info(s);
l = document.createElement("link");
l.setAttribute("type", "text/css");
l.setAttribute("rel", "StyleSheet");
l.setAttribute("href", "data:text," + s);
document.head.appendChild(l);