Tailwind CSS中before伪类图片覆盖层不生效问题求助

问题根源 #

你遇到的问题和Tailwind无关，是CSS绝对定位的基础规则导致的：

• 父元素没有设置relative定位，绝对定位的before伪类会以最近的非static定位祖先元素（通常是body）为参考，而非包裹图片的div
• 代码里的iniline是拼写错误，应该是inline；但即使修正，inline元素作为绝对定位父级时，h-full/w-full无法正确继承尺寸
• before:content-{}写法错误，Tailwind中伪类的content需要用引号包裹空内容，即before:content-['']

正确实现代码 #

用单独的覆盖层div实现：

<script src="https://cdn.tailwindcss.com"></script>
<div class="relative inline-block">
  <img src="//unsplash.it/201" alt="Image" class="relative z-0" />
  <div class="absolute inset-0 z-10 bg-fuchsia-600 opacity-30"></div>
</div>

用伪类实现（修正后写法）：

<script src="https://cdn.tailwindcss.com"></script>
<div class="relative inline-block before:content-[''] before:absolute before:inset-0 before:z-10 before:bg-fuchsia-600 before:opacity-30">
  <img src="//unsplash.it/201" alt="Image" class="relative z-0" />
</div>

关键修改点 #

• 父div添加relative：让绝对定位的覆盖层（或伪类）以该div为定位容器
• 用inline-block代替inline：确保父div尺寸完全包裹图片，同时支持宽高样式继承
• 修正伪类content写法：before:content-['']是Tailwind设置空内容的正确方式
• 用inset-0代替left-0 right-0 top-0：Tailwind简写，快速让覆盖层铺满父容器

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