更新：现在有一个更好的方法。请参阅this answer by Javier Gonzalez
到目前为止，最简单的方法是将您自己的@media规则添加到tailwind的@responsive-类规则中。2如何做到这一点在tailwind的官方文档中的自定义媒体查询主题下有描述。
只需将其添加到您的配置中：

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
          screens: {
            'hover-hover': {'raw': '(hover: hover)'},
      }
    }
  }
}

这在css中转换为@media (hover: hover) { ... }。瞧，你可以使用hover-hover:text-red只在具有悬停功能的设备上显示红色文本。
要创建自己的媒体查询，请保留“raw”不变，并将其他两个属性更改为您想要的任何媒体查询。第一个属性hover-hover是您在tailwind中使用的属性。第二个属性(hover: hover)是您实际的css @media查询的外观。例如：hover: none或pointer: coarse中的一个或多个。
现在，继续使用hover-hover：hover：text-red来修改悬停状态。

可能有点晚了，但是Tailwind团队已经在Tailwind版本3中使用特性标志解决了这个问题：https://github.com/tailwindlabs/tailwindcss/pull/8394
发布包含这些更改的新版本后，从tailwindcss v3.1.0开始，您可以在配置中包含一个功能标记，如下所示：

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

是的，只需使用一个插件生成hover变体，该插件除了添加：hover伪选择器之外，还将所有规则 Package 在@media（hover：hover）规则中：

// tailwind.config.js

const plugin = require('tailwindcss/plugin');

const hoverPlugin = plugin(function({ addVariant, e, postcss }) {
    addVariant('hover', ({ container, separator }) => {
        const hoverRule = postcss.atRule({ name: 'media', params: '(hover: hover)' });
        hoverRule.append(container.nodes);
        container.append(hoverRule);
        hoverRule.walkRules(rule => {
            rule.selector = `.${e(`hover${separator}${rule.selector.slice(1)}`)}:hover`
        });
    });
});

module.exports = {
  plugins: [ hoverPlugin ],
}

sm: md: lg:等响应属性将为您执行这些媒体查询作业。请参考docs中的示例。如果您不想在移动的设备中使用悬停状态，请使用例如-sm:hover:no-underline指定

您可以轻松创建自己的悬停，如下所示：

// styles.css

@variants hover {
  .banana {
    color: yellow;
  }
}

然后像class='hover:banana'一样使用它