在 Tailwindcss 中修改悬停

Question

我注意到 Tailwindcss 中的 :hover 使用默认的悬停选择器，这会导致移动设备上的“卡住”悬停状态。有没有办法修改 :hover 函数来执行 @media(hover:hover) ？

Answer 1

可能有点晚了，但 Tailwind 团队已经在 Tailwind 版本 3 中使用功能标志解决了这个问题：https ://github.com/tailwindlabs/tailwindcss/pull/8394

一旦发布包含这些更改的新版本，从 tailwindcss 开始v3.1.0，您可以在配置中包含一个功能标志，如下所示：

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

Answer 2

到目前为止，最简单的方法就是你自己的@media规则添加到@响应的顺风规则-class。在自定义媒体查询主题下的官方顺风文档中描述了如何做到这一点。

只需将其添加到您的配置中：

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

这转化为@media (hover: hover) { ... }css。瞧，您可以使用hover-hover:text-red仅对具有悬停功能的设备显示红色文本。

要制作您自己的，请保留 'raw' 原样，并将其他两个属性更改为您想要的任何媒体查询。第一个属性hover-hover是您在顺风中使用的属性。第二个(hover: hover)是您实际的 css @media 查询的样子。例如：hover: none或pointer: coarse。

现在，继续使用 hover-hover:hover:text-red 来修改你的悬停状态。