Tailwind v4 で hover が効かない問題を解決した方法

問題の発生

Tailwind CSS v4 にアップグレードした後、プロジェクト内の hover:bg-gray-200 などの hover バリアントが効かなくなりました。一方、Firefox では正常に動作し、Chrome や Edge などの Chromium 系ブラウザで問題が発生します。

開発者ツールで要素を検査し、:hover を強制適用してもスタイルが反映されないため、Tailwind の生成 CSS に問題があると判断しました。

原因

Tailwind CSS v4 では、hover バリアントがデフォルトで @media (hover: hover) メディアクエリ内で出力されるようになりました。これは、モバイルデバイスでの「sticky hover」（タップ後にホバー状態が残る問題）を防ぐための仕様変更です。

しかし、Windows の 2-in-1 PC やタッチスクリーン搭載デバイスでは、Chromium が入力デバイスを「タッチ中心」と誤判定し、メディアクエリが false になるため、hover 効果が一切適用されなくなります。これは Chromium の既知のバグで、Firefox では発生しません。

公式ドキュメント（Hover, focus, and other states）でも、この変更が説明されており、アップグレードガイドでカスタムバリアントの追加が推奨されています。

解決策

src/app.css にカスタムバリアントを定義することで、hover を従来の :hover セレクタに戻します。これにより、メディアクエリをバイパスし、すべてのデバイスで hover が動作します。

手順

1. src/app.css を開き、以下を追加します。

@custom-variant hover (&:hover);

例（既存のコードに追加）:

@import "tailwindcss";
@plugin "@tailwindcss/typography";
 
@import "tw-animate-css";
 
@custom-variant dark (&:is(.dark *));
 
@custom-variant hover (&:hover);  /* ここを追加 */
 
:root {
  /* ... 既存の CSS ... */
}

2. 開発サーバーを再起動します（Ctrl+C → npm run dev 等）。
3. ブラウザのキャッシュをクリアし、ページをリロードします。

動作確認

• Chromium 系ブラウザで hover 効果が復活します。
• 開発者ツールで生成された CSS を確認すると、hover:bg-gray-200 が @media (hover: hover) なしの :hover で出力されます。

注意点

• この変更はモバイルでの sticky hover を復活させる可能性がありますが、開発環境やデスクトップ中心のプロジェクトでは問題ないはずです。
• モバイル最適化が必要な場合、代わりに focus や active バリアントを活用するか、カスタムメディアクエリを追加してください。
• Tailwind v4 のこの仕様は意図的なもので、今後のアップデートで改善される可能性があります。公式アップグレードガイドを確認してください。

まとめ

Tailwind v4 の hover 問題は、カスタムバリアントの追加で簡単に解決できます。この方法で、私のプロジェクトのサイドバーリンクの hover 効果が復活しました。v4 の新機能は便利ですが、こうした変更に注意が必要です。

参考: Tailwind CSS 公式ドキュメント