在 Tailwindcss 中修改悬停

Question

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

Answer 1

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

Answer 2

到目前为止，最简单的方法是将您自己的@media 规则添加到tailwind 中的@responsive-class 规则中。 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 只为具有悬停功能的设备显示红色文本。

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

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

Answer 3

您可以轻松地 create your own hover 如下所示：

// styles.css

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

然后像class='hover:banana'

一样使用它

Answer 4

是的，只需使用插件生成悬停变体，该插件除了添加 :hover 伪选择器外，还将所有规则包装在 @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 ],
}

Answer 5

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

发布包含这些更改的新版本后，您可以将配置更改为：

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

在 Tailwindcss 中修改悬停

Modifying hover in Tailwindcss

css

tailwind-css