Variant for @media (hover: none)

[brandonpittman]

Never thought about this before, but you can use a media query to see if the browser can't hover.

.something {
  display: none;
}

@media (hover: none) {
  display: block;
}

This essentially allows you to check if a user is on a touch device—showing and hiding things based on if they have a pointer available to them. Something like a hoverless: variant (or some other name) could be super useful.

💡 from @qcmatsuoka

[brandonpittman]

Went ahead and solved this myself.

https://github.com/brandonpittman/tailwindcss-plugin-fancy/tree/master/packages/future