🍆

スマホでタップ後も:hoverのスタイルが残ってしまう問題がTailwind CSSでも解決できるようになってた

2024/01/24に公開

半年前ぐらいに話題になった下記の記事を覚えていますか？
Tailwind CSSではこの問題を解決することが難しく諦めていたことと思います。

しかし、同時期にTailwind CSSでもこの問題を解決できそうな機能が追加されていたようです！

Tailwind CSSで解決するにはどうすればいいかを見ていきましょう。

設定をしよう

tailwind.config.ts

const config: Config = {
  future: {
    hoverOnlyWhenSupported: true,
  },
}

この設定を追加しましょう。
適用されると、hoverが有効なブラウザだけで hover: が適用されるようになります。

要するに、

ということです。

page.tsx

export default function HogeIndex () {
  return (
    <div className="hover:text-red-500 active:text-red-500">
      <p>Hello!!!</p>
    </div>
  )
}

◆PCブラウザ用のスタイル

hover:text-red-500

要素をhoverすると赤い文字になります。
※クリック時に active: が適用されますが、同じスタイルなので影響なし。

◆スマホ用のスタイル

active:text-red-500

要素をタップしている間だけ赤い文字になります。
タップをやめると自動的に元の文字色に戻ってくれます。

hover: が無効になっていることがお分かりいただけるかと思います。

これでスマホユーザーに寄り添ったUI実装が可能になりましたね！
記述量が倍になって手間ですが、積極的に取り入れていきたいですね！