Tailwind中能否使用border-image？自定义样式未生效求助

Tailwind 完全支持任意语法（arbitrary syntax），你的样式未生效是因为 CSS 属性的写法细节出错了，以下是修正方案和原因说明：

修正后的代码 #

<button className="[border-image:linear-gradient(to top right, #f6b73c, #4d9f0c) 1] border-4 border-transparent bg-white p-4"> Hello! </button>

或者拆分属性写法更清晰：

<button className="[border-image-source:linear-gradient(to top right, #f6b73c, #4d9f0c)] [border-image-slice:1] border-4 border-transparent bg-white p-4"> Hello! </button>

关键修正点 #

• 移除border-solid：当使用border-image时，border-style会被border-image的显示逻辑替代，保留border-solid会干扰渐变边框的渲染，仅用border-transparent维持边框宽度占位即可。
• 将30改为1：对于渐变作为border-image-source，border-image-slice值设为1是标准用法，能让渐变正确沿边框拉伸；原代码的30会被解析为30px，对于常规尺寸按钮来说会过度裁切渐变，导致看不到效果。

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