Tailwind 边框显示渐变颜色错误

Answer 1

您可以考虑重新设计背景渐变，使其覆盖元素的边框大小。这涉及将其“原点”点移动到左上角并按所有四个边的边框宽度增加其大小：

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: 'red',
      },
    },
  },
}

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="hover:shadow-primary/25 hover:border-primary box-border flex h-full flex-col justify-center rounded-2xl border-4 border-transparent bg-gradient-to-br from-[#180042] via-[#2e017d] to-purple-900 p-20 text-white shadow-xl duration-100 ease-in-out hover:border-4 lg:col-span-2 lg:row-span-2 lg:bg-gradient-to-br bg-[length:calc(100%+(theme(borderWidth.4)*2))_calc(100%+(theme(borderWidth.4)*2))] bg-[position:calc(theme(borderWidth.4)*-1)_calc(theme(borderWidth.4)*-1)]">Foo</div>

或者，您也可以考虑使用 Tailwind 的

ring-*

实用程序集 在悬停时绘制边框：

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: 'red',
      },
    },
  },
}

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="hover:shadow-primary/25 box-border flex h-full flex-col justify-center rounded-2xl bg-gradient-to-br from-[#180042] via-[#2e017d] to-purple-900 p-20 text-white shadow-xl duration-100 ease-in-out lg:col-span-2 lg:row-span-2 lg:bg-gradient-to-br hover:ring-primary hover:ring-inset hover:ring-4">Foo</div>