JSFiddle - React, Tailwind, and code Playground
HTML
<div id="js-test" class="test"></div>
CSS
body {
margin:0;
}
.test {
background:#DDD;
width:300px;
height:100px;
text-align:center;
line-height:100px;
}
.test-red {
background:red;
}
JavaScript
let test = document.getElementById('js-test');
test.innerHTML = test.clientWidth + ' - ' + document.documentElement.clientWidth;
window.addEventListener("resize", function(){
test.innerHTML = test.clientWidth + ' - ' + document.documentElement.clientWidth;
if (test.clientWidth > document.documentElement.clientWidth) {
test.classList.add('test-red');
} else {
test.classList.remove('test-red');
}
});