Tailwind渐变需同时使用from-、via-、to-三类，且必须搭配方向类如bg-gradient-to-r；单独via-无效，方向类不可省略且只能有一个。
渐变背景的 class 命名规则不是 from-via-to
Tailwind 并不支持 from-via-to 这种写法——它根本不存在。你写的 bg-gradient-to-r from-blue-500 via-green-400 to-yellow-300 能生效，靠的是三个独立功能类的组合：方向控制（bg-gradient-to-r）+ 起始色（from-blue-500）+ 终止色（to-yellow-300），而 via-green-400 只在有 from 和 to 同时存在时才起作用，且必须写在中间位置。
必须同时使用 from + to 才能激活 via
via- 类本身不生效，它只是个“中间色占位符”，依赖上下文。Tailwind 的渐变生成逻辑是：检测到 from- 和 to- 同时存在，才把 via- 插入到线性渐变的 50% 位置（CSS 中对应 color-stop(50%)）。
- ✅ 正确顺序：
from-blue-500 via-green-400 to-yellow-300 - ❌ 无效组合：
via-green-400 to-yellow-300（缺from-，via被忽略） - ❌ 无效组合：
from-blue-500 via-green-400（缺to-，via被忽略） - ⚠️ 注意：即使写了
via，Tailwind 也不会自动加background-size: 200%;或动画，这些得自己补
方向类决定渐变轴线，不能省略
没有 bg-gradient-to-* 类，from/via/to 完全不会渲染为渐变——它们会被 Tailwind 忽略（因为没目标 CSS 属性可挂载）。可用的方向类包括：
-
bg-gradient-to-r（左→右） -
bg-gradient-to-br（左上→右下） -
bg-gradient-to-t（下→上） -
bg-gradient-to-l（右→左）——注意不是to-left，是to-l
方向类必须紧邻其他渐变类，且只写一个；重复写（如 to-r to-b）会导致后者覆盖前者。
立即学习“前端免费学习笔记（深入）”；
自定义颜色或透明度要小心 class 优先级
Tailwind 默认不生成带透明度的 from-/via-/to- 变体（比如 from-blue-500/30），除非你启用了 experimental.extendContrast 或手动配置了 gradientColorStops。常见 workaround：
- 用
bg-gradient-to-r from-blue-500 via-blue-500/20 to-transparent——to-transparent是内置的 - 对容器加
bg-opacity-80整体降不透明度（但会影响所有子元素） - 更稳妥的做法：改用
style="background: linear-gradient(...)"写内联样式，绕过 class 限制
另外，via- 不支持 opacity 后缀（via-blue-500/30 无效），这是最容易卡住的地方。
