🐡

Tailwind CSS を使うなら hoverOnlyWhenSupported を設定しておこう

に公開

現在最新の Tailwind CSS v3.4.4 時点では、hover 系のクラスを使うと pointer の有無を考慮せずにスタイルが当てられてしまい、タッチデバイスでは hover 系のスタイルが意図せず残ってしまう、いわゆる Sticky Hover States problem が起きます。

これは Media query を使うことでポインタデバイスのみで適用させる、という対処法がありますが、現在 Tailwind の公式から v4 が出るまでの間これを防ぐためのフラグ hoverOnlyWhenSupported が提供されているのでこれを指定しておきましょう。

module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  // ...
}

https://github.com/tailwindlabs/tailwindcss/pull/8394

Ubie テックブログ

Discussion