diff --git a/src/components/FeedbackButtons.tsx b/src/components/FeedbackButtons.tsx
index 205d250..7e5f987 100644
--- a/src/components/FeedbackButtons.tsx
+++ b/src/components/FeedbackButtons.tsx
@@ -25,7 +25,7 @@ export interface FeedbackButtonsCssClasses {
 const builtInCssClasses: FeedbackButtonsCssClasses =
   withStylelessCssClasses<FeedbackButtonsCssClasses>("FeedbackButtons", {
     container:
-      "flex gap-x-1 absolute -right-1 -top-3 opacity-0 group-hover:opacity-100 duration-200",
+      "flex gap-x-1 absolute -right-1 -top-3 [@media(hover:hover)]:opacity-0 group-hover:opacity-100 duration-200",
     thumbsUpButton:
       "w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center",
     thumbsUpIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
diff --git a/tailwind.config.js b/tailwind.config.js
index 651b9fe..e758e7e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,4 +29,7 @@ module.exports = {
     require("@tailwindcss/typography"),
     require("@tailwindcss/container-queries"),
   ],
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
 };