JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div></div>
<ul>
  <li class="failure"> - Doesn't appear to understand <code>pointer</code>.</li>
  <li class="orangered"> - Probably uses a mouse.</li>
  <li class="limegreen"> - Probably uses touch</li>
  <li class="skyblue"> - Could maybe have both mouse <em>and</em> touch.</li>
</ul>

CSS

*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --hasTouch: failure;
}
@media (pointer:fine){
  :root {
    --hasTouch: orangered;
  }
}
@media (pointer:coarse){
  :root {
    --hasTouch: limegreen;
  }
}
@media (pointer:fine) and (pointer:coarse){
  :root {
    --hasTouch: skyblue;
  }
}

div {
  background-color: var(--hasTouch, #fff);
  height: 5em;
  border: 2px solid #000;
}

ul {
  width: 80vw;
  margin: 0.5em auto;
  list-style-type: none;
  
}
li::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  border-radius: 50%;
  border: 2px solid #000;
}
.failure {
  color: #000;
}
.orangered::before {
  color: orangered;
}
.limegreen::before {
  color: limegreen;
}
.skyblue::before {
  color: skyblue;
}