解決 tailwind 手機版 active 後，仍保持在 hover 狀態

發表於 2023-09-11 分類於程式語言，前端 Disqus：

tailwind 官方也發現了這個問題，只需要一個 flag 即可解決！

前言

熟悉 tailwind 的人，應該很容易寫出如下程式碼

<div class="bg-blue-500 hover:bg-green-500 active:bg-red-500 w-5 h-5">
    hover me!
</div>

是一個很無聊的藍色正方形；hover 時變淺藍色；active 後變紅色

在電腦上可以很正常的運作
但切成手機版時，問題就發生了！

應該變成 active 時，會發現樣式停留在 hover 的綠色

簡單粗暴的解法就是透增加個lg:，在小螢幕上取消 hover 效果就可以了
考慮到平板，不能設在md:

但代價就是電腦上，user 縮小視窗使用，同時也失去了 hover

完美解就是要寫 js 去判斷現在是否手機裝置…相信想到這裡大概就懶了
畢竟在電腦上縮小視窗使用，大概也不會留意到 hover 效果不見了

所幸官方已經解決這個問題，只需要一個 flag ！

缺點就是要 v3.1.0 以後才支援。若是老專案的話，就只剩暴力解或暫時無視他了QQ~

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