使用 Tailwind 悬停时的 SVG 颜色填充
Posted
技术标签:
【中文标题】使用 Tailwind 悬停时的 SVG 颜色填充【英文标题】:SVG color fill on hover using Tailwind 【发布时间】:2021-03-13 19:15:12 【问题描述】:我一直试图让我的 svg 在悬停时用黑色填充,但似乎无法做到。
我希望它有这样的黑色轮廓 . 然后像这样填写。
这是我希望在悬停时填写的代码。但是,它并不完全奏效。如果我从hover:fill-current
中去掉hover:
,那么它只会一直填充黑色。
<svg class="h-6 w-6 text-black hover:fill-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
有什么想法吗?
【问题讨论】:
【参考方案1】:1- 默认情况下,只会为填充实用程序生成响应式变体。因此,我们需要为fill-current
类创建所需的变体来激活:hover
状态。
module.exports =
theme:
extend:
,
,
variants:
fill: ['hover', 'focus'], // this line does the trick
,
plugins: [],
2- 考虑使用颜色类来获得准确的结果。
<svg class="h-6 w-6 text-black hover:fill-current hover:text-black" ... />
</svg>
Working example
参考
Fill - Tailwind docs
【讨论】:
以上是关于使用 Tailwind 悬停时的 SVG 颜色填充的主要内容,如果未能解决你的问题,请参考以下文章