<p>Tailwind 的 from-、via-、to- 类固定映射到 0%、50%、100% 位置，无法自定义停靠点；要实现 70% 硬切等效果，必须用 arbitrary values 手写 linear-gradient 并重复色标位置。</p>
为什么from-via-to写法无法控制渐变停靠点位置
Tailwind 的 from-、via-、to- 类不是 CSS color-stop 的映射，它们固定对应 0%、50%、100% 三个位置。你写 from-blue-500 via-green-400 to-yellow-300，生成的始终是 linear-gradient(to right, #3b82f6 0%, #4ade80 50%, #fbbf24 100%)——中间色永远卡在正中，没法改成 20% 或 80%。
硬边切角必须用 Arbitrary Values 手写 color-stop
要实现类似「左 70% 是蓝色，右 30% 突变成黄色」的硬切效果，只能绕过预设类，用 bg-[...] 写完整渐变函数，并显式指定色标位置：
-
bg-[linear-gradient(to_right,#3b82f6_70%,#fbbf24_70%)]：70% 处硬切，无过渡 -
bg-[linear-gradient(90deg,rgba(59,130,246,1)_0%,rgba(59,130,246,1)_70%,rgba(251,191,36,1)_70%,rgba(251,191,36,1)_100%)]：更精确控制起止区间（注意重复写两次同一位置才能实现硬边） - 色值推荐用
rgb()或rgba()，避免命名色（如blue-500）在 Arbitrary 值中被忽略 - 必须加
bg-no-repeat和明确尺寸（如h-12），否则可能渲染异常
常见错误：试图用多个 via 或调整顺序骗过 JIT
这些写法完全无效：
-
from-blue-500 via-blue-500 via-yellow-300 to-yellow-300：Tailwind 只认第一个via-，第二个被丢弃 -
to-blue-500 from-yellow-300：方向类仍按to right解析，但色标顺序反了，浏览器会报错或退化为单色 -
bg-gradient-to-r from-blue-500 to-yellow-300加via-transparent：透明中间色仍占 50%，不是硬切，而是淡入淡出
性能与兼容性注意事项
Arbitrary Values 中的渐变函数不会被 Tailwind 缓存，每次出现都生成新 CSS 规则；大量不同 stop 位置会导致 CSS 体积膨胀。Safari 16.4+ 支持 background-clip: text 配合硬边渐变，但旧版需额外加 -webkit-background-clip: text——而 Arbitrary Values 不自动补前缀，得手动写成 bg-[background-clip:text;-webkit-background-clip:text;...]。
立即学习“前端免费学习笔记（深入）”；
硬边切角的本质是两个色标重叠，这个细节极易被忽略：少写一个位置（比如只写 _70% 一次），浏览器就按默认插值处理，切口立刻变模糊。
