css - 在 Tailwindcss 中修改悬停

Question

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

Answer 1

更新:现在有更好的方法。参见 this answer by Javier Gonzalez

原文:到目前为止，最简单的方法是将您自己的@media 规则添加到tailwind 中的@responsive 类规则中。在 custom media queries 主题下的官方 tailwind 文档中描述了如何做到这一点。 .

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

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

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

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

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