Tailwind中的光影效果

Question

如何在Tailwind中实现光效？需要让图标发光。

示例（先观看第一个图标）：

输入图片描述

尝试通过将阴影颜色更改为白色来通过“box-shadow”实现。但效果不是我想要的：在图标边框上形成了阴影。

当前通过CSS实现：

.box-shadow-hover:hover {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.50));
 }

这在tailwind中可能吗？

- DEN TRE

---

这个回答解决了你的问题吗？在Tailwind CSS中使用有色的Box Shadow来实现NProgress Glow效果？ - undefined

Answer 1

如果您想按照tailwind的方式进行操作，那么默认配置是不可能实现的，您需要扩展主题并添加自己的阴影。

https://tailwindcss.com/docs/box-shadow/#box-shadows

- Enrique Chavez

---

在Tailwind中，阴影与图标的交互效果不太好。要么是我做错了什么。谢谢你的回答。 - undefined

对于那些"一次性的"，暂时不需要扩展，尽管对于按钮，你可能想要定义它。如果需要，可以内联应用任意值：https://tailwindcss.com/docs/box-shadow#arbitrary-values - undefined

Answer 2

对于任何想要快速复制的人，只需将以下内容添加到tailwind配置中：

-> https://tailwindcss.com/docs/theme

extend: {
  dropShadow: {
    glow: [
      "0 0px 20px rgba(255,255, 255, 0.35)",
      "0 0px 65px rgba(255, 255,255, 0.2)"
    ]
  }
}

- Saif Tarek

Answer 3

现在您可以使用https://tailwindcss.com/docs/drop-shadow。

使用drop-shadow-{amount}实用程序与filter实用程序一起模糊元素。

- smoizs