Solving the sticky hover effect on Mobile with TailwindCSS

Here is the video explaining the concepts of avoiding using hover on device not supporting the feature: https://youtu.be/uuluAyw9AI0.
This just talk about the CSS approach.

For Tailwind, the team has developed a configuration in the tailwind.config.js file that only support hover when needed:

// tailwind.config.js
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  // ...
}