Tailwind边框渐变颜色异常求助：解决hover时内容偏移或色偏

方案1：用内阴影模拟边框，彻底避免内容偏移 #

无需依赖透明边框占位，改用不占据布局空间的内阴影模拟边框效果，hover时切换阴影颜色即可：

<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 shadow-[inset_0_0_0_4px_transparent] duration-100 ease-in-out hover:shadow-[inset_0_0_0_4px_theme('colors.primary')] lg:col-span-2 lg:row-span-2 lg:bg-gradient-to-br"></div>

• 原理：内阴影shadow-[inset_0_0_0_4px_transparent]初始为透明，仅占位视觉空间；hover时替换为primary色内阴影，既实现边框效果，又完全不会触发内容偏移。

方案2：调整背景裁剪范围，消除边框颜色偏移 #

如果坚持使用透明边框方案，只需添加bg-clip-padding类限制渐变背景仅填充内边距区域，避免渐变延伸到透明边框导致的视觉偏移：

<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 bg-clip-padding lg:col-span-2 lg:row-span-2 lg:bg-gradient-to-br"></div>

• 原理：默认background-clip: border-box会让渐变覆盖透明边框区域，hover时实色边框覆盖渐变边缘产生偏移；bg-clip-padding将背景限制在padding以内，透明边框区域无渐变，hover时边框颜色显示正常。

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