在Tailwind CSS中悬停或聚焦

unguejic 于 2022-11-26 发布在其他

关注(0)|答案(2)|浏览(149)

因此，我想更改hover或focus上文本的颜色

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

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

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

在纯css中，我希望做的事情如下：

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

这在TailwindCSS中是可能的吗？

css

来源：https://stackoverflow.com/questions/74350677/hover-or-focus-in-tailwind-css

2条答案

按热度按时间

whlutmcx1#

您可以使用@apply来重用现有的tailwind样式，这样您就不会以编写color: green或其他任何额外的内容而告终，否则您将以普通CSS编写这些内容〉
https://tailwindcss.com/docs/functions-and-directives#apply

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

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

赞(0）回复(0）举报 2022-11-26

gzjq41n42#

您可以编写一个简单的插件，将焦点和悬停组合成一个自定义变体，如文档中所述。
关键是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>

顺风播放时DEMO

赞(0）回复(0）举报 2022-11-26

我来回答

在Tailwind CSS中悬停或聚焦

2条答案

相关问题

热门标签

最新问答