因此,我想更改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中是可能的吗?
2条答案
按热度按时间whlutmcx1#
您可以使用
@apply
来重用现有的tailwind样式,这样您就不会以编写color: green
或其他任何额外的内容而告终,否则您将以普通CSS编写这些内容〉https://tailwindcss.com/docs/functions-and-directives#apply
这样,您的
class
属性中的代码也会减少。gzjq41n42#
您可以编写一个简单的插件,将焦点和悬停组合成一个自定义变体,如文档中所述。
关键是
addVariant()
允许在第二个参数中传递多个选择器作为规则:使用方法:
顺风播放时DEMO