如何在Tailwind CSS中实现图标发光（Light Effect）效果？

当然可以用Tailwind直接实现你想要的图标发光效果！不用依赖自定义CSS类，完全能通过Tailwind的内置工具类搞定~

直接用动态工具类实现 #

你之前写的自定义CSS：

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

对应的Tailwind写法就是直接给图标加上hover:drop-shadow-[0_0_2px_rgba(255,255,255,0.5)]这个工具类，比如：

<svg class="w-6 h-6 hover:drop-shadow-[0_0_2px_rgba(255,255,255,0.5)]" fill="currentColor" viewBox="0 0 20 20">
  <!-- 你的图标路径内容 -->
</svg>

为啥之前的box-shadow效果不对？ #

你之前尝试的box-shadow是给元素的盒子模型加阴影，不管图标本身的形状，只会在元素的矩形边界外生成阴影；而drop-shadow是跟着元素的实际可见形状（比如SVG的路径）生成阴影，所以才会呈现出图标边缘发光的效果，这正是你要的~

自定义可复用的发光效果（可选） #

如果这个发光效果要在多个地方复用，你可以在tailwind.config.js里扩展一个自定义的drop-shadow预设：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      dropShadow: {
        'icon-glow': '0 0 2px rgba(255, 255, 255, 0.5)',
      },
    },
  },
}

之后就可以直接用hover:drop-shadow-icon-glow来调用这个效果啦，更简洁省心~

内容的提问来源于stack exchange，提问作者DEN TRE