如何使用Tailwind CSS创建5色线性渐变边框？

Tailwind默认的from-/via-/to-渐变语法最多支持3个颜色节点，要实现5色渐变，你需要直接使用自定义的linear-gradient表达式定义背景，再结合两种常见的渐变边框实现方式：

方案1：使用border-image（适合无圆角场景） #

这种方式代码简洁，但不支持圆角（border-radius会失效），适合不需要圆角的场景：

<div class="border-4 border-image-[linear-gradient(to_right,#83C59B,#FCF09A,#FF8A8A,#71CAEE,#A77DC2)] border-image-slice-1 p-4">
  内容区域
</div>

• border-image-slice-1是必填项，确保渐变铺满整个边框宽度
• 调整border-4的数值可以改变边框粗细

方案2：背景渐变+内层容器（支持圆角，更灵活） #

如果需要带圆角的渐变边框，推荐用嵌套容器的方式：外层容器设置5色渐变背景，用内边距模拟边框宽度，内层容器用纯色背景覆盖内容区域：

<div class="bg-[linear-gradient(to_right,#83C59B,#FCF09A,#FF8A8A,#71CAEE,#A77DC2)] p-[2px] rounded-xl">
  <div class="bg-white p-5 rounded-xl">
    内容区域
  </div>
</div>

• p-[2px]的数值对应边框粗细，可按需调整
• 内外层容器的圆角属性保持一致，就能实现带圆角的渐变边框

下方渐变线条的实现 #

直接创建一个窄高的div，设置5色渐变背景即可：

<div class="w-full h-[3px] bg-[linear-gradient(to_right,#83C59B,#FCF09A,#FF8A8A,#71CAEE,#A77DC2)] mt-4"></div>

注意事项 #

• 可以修改linear-gradient里的方向参数（比如to_left/to_bottom）来调整渐变方向
• 颜色值可直接替换为你需要的5种颜色，节点顺序决定渐变过渡的顺序

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