如何在Tailwind中实现光效?需要让图标发光。
示例(先观看第一个图标):
尝试通过将阴影颜色更改为白色来通过“box-shadow”实现。但效果不是我想要的:在图标边框上形成了阴影。
当前通过CSS实现:
.box-shadow-hover:hover {
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.50));
}
这在tailwind中可能吗?
如何在Tailwind中实现光效?需要让图标发光。
示例(先观看第一个图标):
尝试通过将阴影颜色更改为白色来通过“box-shadow”实现。但效果不是我想要的:在图标边框上形成了阴影。
当前通过CSS实现:
.box-shadow-hover:hover {
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.50));
}
如果您想按照tailwind
的方式进行操作,那么默认配置是不可能实现的,您需要扩展主题并添加自己的阴影。
extend: {
dropShadow: {
glow: [
"0 0px 20px rgba(255,255, 255, 0.35)",
"0 0px 65px rgba(255, 255,255, 0.2)"
]
}
}
现在您可以使用https://tailwindcss.com/docs/drop-shadow。
使用drop-shadow-{amount}实用程序与filter实用程序一起模糊元素。