Zenn
📱

Tailwind CSS v4: モバイルでのホバー効果が変わった問題と対応策

に公開
Tailwind CSS
tech

概要

Tailwind CSS v4では、hoverの実装が変更され、モバイルデバイスでのタップ時にホバー効果が適用されなくなった。

変更内容

v4では、hoverバリアントが以下のように実装されるようになった。

@media (hover: hover) {
  .hover\:underline:hover {
    text-decoration: underline;
  }
}

https://tailwindcss.com/docs/upgrade-guide#hover-styles-on-mobile

この変更により、マウス操作のデバイス（デスクトップ）でのみホバー効果が適用され、タッチデバイス（スマホ・タブレット）ではタップ時の効果が表示されなくなった。

<!-- タッチデバイスでは`bg-red-500`が適用されない -->
<button class="bg-blue-500 hover:bg-red-500">
    ボタン
</button>

変更理由

Generally though we recommend treating hover functionality as an enhancement, and not depending on it for your site to work since touch devices don't truly have the ability to hover.

  • タッチデバイスには本来ホバー機能が存在しない
  • ホバーは拡張機能として扱うべき
  • サイトの基本機能はホバーに依存すべきではない

対応策

1. 独自バリアントの作成（v3の挙動を維持）

globals.css
@custom-variant hover (&:hover);

2. focusとactiveバリアントの活用

focus

  • 要素が選択された状態（クリック・タップ・Tabキーでの移動など）に適用される
  • 選択後も状態は維持される（別の要素を選択するまで）

active

  • 要素が実際に押されている間にだけ適用される（直感的なモバイル体験）

ブレークポイントと組み合わせる

  • active:bg-yellow-500: モバイルでのタップ時に黄色に変更
  • md:hover:bg-red-500: デスクトップでのカーソルホバー時に赤色に変更
<button class="bg-blue-500 active:bg-yellow-500 md:hover:bg-red-500">
  ボタン
</button>

結論

指とマウスは異なる入力デバイスであり、モバイルとデスクトップの体験は分離すべきである。

そのためデバイス特性に応じた設計がベストプラクティスであり、hoverはデスクトップデバイスにのみ活用し、モバイルデバイスではブレークポイントと組み合わせてactiveやfocusを活用すべきである。

また、キーボードユーザーのアクセシビリティを向上させるためにfocus-visibleの追加も検討するとよい。

以前の挙動が必要なケースでは一時的に@custom-variantを使いつつも、長期的には各デバイスの特性に合わせた設計に移行することが望ましい。

Discussion