JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-element">
    <div class="button"></div>
</div>

CSS

.button, .touch_device .button:hover {
    width: 100px;
    height: 100px;
    background: red;
}

.button:hover, .touch_device .button:active {
    background: blue;
}

JavaScript

function is_touch_device() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}


if(is_touch_device()) {
var d = document.getElementById("main-element");
d.className = d.className + "touch_device";
}