Zenn
👆

そもそもモバイルでは[ hover:~ ]が効かないように設定する

2023/11/30に公開
Tailwind CSS
#
レスポンシブ
tech

TL;DR

// tailwind.config.ts

 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
 
   // other config
 }

モバイルではホバーが残る

hover:opacity-50とした時、モバイルでその要素を軽く触れるとホバーが効いてしまう。
これはスクロールしている時に気になって眠れなくなるので、
md:hover:opacity-50 max-md:active:opacity-50みたいに書いていた🤮

Tailwind側でも準備中

この問題はTailwindCSS側でも認識していて、将来的に対応するらしい。
それまでは hoverOnlyWhenSupported が用意されていて、モバイルでは hover を無効にしてくれるので、モバイルでの記述active:を足せばいい。

// tailwind.config.ts

 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
 
   // other config
 }

// Example

 <div 
-  className="bg-gray-200 hover:bg-black "
+  className="bg-gray-200 hover:bg-black active:bg-black "
   ></div>

ビフォーアフター

何もしない
hover:bg-blackがモバイルでも効いていてスクロールが終わっても黒いまま（ホバーが効いている）。
hoverあり

futureを設定
hoverOnlyWhenSupportedをtrueにするとモバイルではhover自体が効かなくなる。
hoverOnlyWhenSupportedあり

モバイル対応
モバイル用にactive:bg-blackを追加することでモバイルでは触れた時だけ黒くなる（アクションが効く）。
activeあり

参考:
Configure Touch Screen Media Queries Using Tailwind CSS
Solving the sticky hover effect on Mobile with TailwindCSS

Discussion