Tailwind CSS中伪元素阴影不显示的问题求助

你的代码有两个关键问题导致阴影出不来：

1. 伪元素是空的——drop-shadow 得靠元素的可见轮廓才能生成阴影，你只给伪元素设了尺寸，但没加背景或任何可见内容，自然没阴影。
2. 层级没调好——没给伪元素加负 z-index，而且父元素没创建堆叠上下文，结果伪元素盖在父元素上面，就算有阴影也被黄色背景挡住了。

把你的自定义工具类改成这样：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .before-shadow {
    position: relative;
    /* 给父元素设z-index，确保它能压在伪元素上面 */
    z-index: 1;
  }
  .before-shadow::before {
    content: "";
    position: absolute;
    /* 让伪元素比父元素大一圈，阴影就能在四周露出来 */
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    /* 负z-index把伪元素扔到父元素后面 */
    z-index: -1;
    /* 加个透明背景，让drop-shadow能识别这个元素的存在 */
    @apply bg-transparent drop-shadow-2xl;
  }
}

• 要是不想让伪元素变大，也可以让它和父元素尺寸一致，然后调整 drop-shadow 的偏移参数来做后方阴影。
• 用 box-shadow 替代 drop-shadow 也行，两者区别是：box-shadow 跟着盒子模型走，drop-shadow 会跟着元素的透明轮廓走，看你需求选就行。

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