🐡

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

2024/06/14に公開

CSS

TypeScript

Tailwind CSS

tech

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

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

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

Discussion