Tailwind CSS hoverOnlyWhenSupported配置不生效问题求助

你对future: {hoverOnlyWhenSupported: true}的配置理解有误：这个配置的作用是让hover样式仅在支持主动hover操作的设备（如带鼠标的桌面端）上生效，触摸类设备（移动端）不会触发hover状态，因此元素会保持原样式（红色），而非自动变为hover后的蓝色。

要实现「移动端无需hover就显示蓝色背景，桌面端默认红色、hover时变蓝色」的需求，无需依赖该future配置，直接通过Tailwind的响应式能力或自定义媒体查询实现：

方法1：响应式前缀快速实现 #

直接针对移动端设置目标背景色，桌面端覆盖为原样式并保留hover效果：

<div className="p-4 bg-blue-600 md:bg-red-600 md:hover:bg-blue-600">Hover Test</div>

• bg-blue-600：移动端默认显示蓝色
• md:bg-red-600：中等屏幕及以上（桌面场景）默认显示红色
• md:hover:bg-blue-600：桌面端hover时切换为蓝色

方法2：精准针对触摸设备 #

如果需要严格区分触摸设备和支持hover的设备（而非仅按屏幕尺寸划分），可以自定义工具类：
在tailwind.config.js中添加自定义工具类：

module.exports = {
  // 其他原有配置...
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '@media (hover: none)': {
          '.bg-touch-blue': {
            backgroundColor: '#2563eb' // 对应Tailwind的blue-600色值
          }
        }
      })
    }
  ]
}

然后在组件中使用：

<div className="p-4 bg-red-600 hover:bg-blue-600 bg-touch-blue">Hover Test</div>

这样触摸设备会自动应用蓝色背景，支持hover的设备默认红色、hover触发蓝色。

hoverOnlyWhenSupported: true的正确使用场景是：避免触摸设备上误触元素后残留hover样式（比如点击后背景色一直停留在hover状态），此时hover样式只会在桌面端生效，移动端不会有任何hover相关的样式变化。

内容的提问来源于stack exchange，提问作者Coolkid