hover 或关注 Tailwind CSS

Question

所以我想更改hover或focus上的文本颜色

<div class="hover:text-green-500 focus:text-green-500">foo bar</div>

但我想知道是否可以在一个语句中压缩所有内容，所以我不需要为两者重复text-green-500 。 我尝试了下面的代码，但它变成了一个and语句而不是or 。

<div class="hover:focus:text-green-500">foo bar</div>

在纯 css 中，我想要做的是这样的：

div:hover, div:focus {
  color: green
}

这在 TailwindCSS 中可能吗？

Answer 1

您可以编写一个简单的插件来将焦点和 hover 组合成一个自定义变体，如文档中所述。

关键是addVariant()允许在第二个参数中作为规则传入多个选择器：

//tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('hocus', ['&:hover', '&:focus'])
    })
  ],
}

用法：

<div class="hocus:text-green-500">foo bar</div>

顺风游戏演示

Answer 2

您可以@apply重新使用现有的 tailwind styles ，这样您就不会最终编写color: green或您本来可以用普通 CSS 编写的任何其他内容>

https://tailwindcss.com/docs/functions-and-directives#apply

div:hover, div:focus {
  @apply text-green-500;
}

这样，您的class属性中的代码也将减少。