带圆角的渐变边框实现方案在Tailwind CSS中失效如何解决

问题根因 #

Tailwind 内置的基础样式重置（Preflight）默认给所有元素（含伪元素）设置了 box-sizing: border-box，和原生测试环境默认的 content-box 盒模型行为不一致，你给伪元素同时设置了四个方向偏移和固定宽高的写法在 border-box 模式下会出现尺寸计算错误，最终导致渐变背景的伪元素渲染异常、不可见。

修复方案 #

方案1：修改原有自定义CSS #

仅需删除 .fem:before 规则中的 width 和 height 两行配置即可。绝对定位元素同时设置了 top: -5px; left: -5px; right: -5px; bottom: -5px 时，会自动撑满父元素外扩5px的区域，不需要额外指定宽高，修改后规则如下：

.fem:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  border-radius: 12px;
  background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);  
}

方案2：纯Tailwind类实现（无需自定义CSS） #

更符合Tailwind使用习惯的写法，直接通过嵌套结构实现渐变边框效果：

<div class="relative p-[5px] rounded-xl bg-gradient-to-br from-[#ff7a18] via-[#af002d] to-[#319197]">
  <div class="bg-black text-white p-4 rounded-lg">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum neque debitis at ad fugit, esse sequi rem ab consequatur id sint veniam ex quam adipisci. Ab itaque officia atque id!
    </p>
  </div>
</div>

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