如何使用Tailwind CSS为适配后的图片而非容器添加阴影？

你现在的问题出在shadow类用的是CSS的box-shadow，它是给整个img元素的盒子加阴影——虽然你给img设了w-full h-full，但object-contain让图片内容没有填满这个盒子，所以阴影看起来是容器的大小，而非图片本身。

改成用**filter: drop-shadow()**就能解决，这个滤镜会跟着图片的实际内容轮廓生成阴影，而不是元素的盒子。用Tailwind的话直接替换掉原来的shadow类就行：

<script src="https://cdn.tailwindcss.com"></script>
<div class="m-6 space-x-3">
  <div v-for="m in media" class="w-[200px] h-[200px] inline-block">
    <img class="object-contain w-full h-full drop-shadow-[0_0_3px_#000]" src="http://placekitten.com/200/300">
  </div>
  <div v-for="m in media" class="w-[200px] h-[200px] inline-block">
    <img class="object-contain w-full h-full drop-shadow-[0_0_3px_#000]" src="http://placekitten.com/300/200">
  </div>
</div>

如果想用Tailwind预设的阴影等级，比如和原来shadow-black接近的效果，也可以用drop-shadow-lg这类预设类，或者根据需求自定义阴影的模糊度、偏移量和颜色。

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