<p>bg-gradient-to-r 单独使用无效，必须搭配 from- 和 to- 指定起止色；常见失效原因包括缺色标、元素无尺寸、父容器 overflow: hidden 或 via- 使用不当。</p>
单独写 bg-gradient-to-r 不会显示任何渐变——它只定义方向，不提供颜色，必须搭配 from- 和 to- 才生效。
为什么加了 bg-gradient-to-r 却看不到效果
最常见原因是：只写了方向类，没指定起止色。Tailwind 的渐变工具类是「方向 + 色标」的分离设计，bg-gradient-to-r 本身生成的是 background-image: linear-gradient(to right, ...)，但括号里为空，浏览器渲染为透明渐变，叠在默认白色背景上完全不可见。
- 漏掉
from-：起点色缺失，渐变无起始锚点 - 漏掉
to-：终点色缺失，渐变无终止位置 - 元素没有高度或内容：比如空
<div></div>，即使写了完整类，也因盒模型尺寸为 0 而不可见 - 父容器设了
overflow: hidden，而渐变区域因via-偏移或 padding 溢出被裁剪
from-、via-、to- 的使用规则
这三个类不是可选修饰，而是渐变渲染的必要参数组合：
-
from-和to-必须同时存在，缺一不可；例如from-blue-500 to-purple-600 -
via-仅在三者共存时有效：即from-*+via-*+to-*，少一个就会被 Tailwind 忽略 -
via-最多只支持一个（默认配置下），写两个如via-cyan-400 via-pink-500不会报错但仅第一个生效 - 所有颜色必须来自
tailwind.config.js中已启用的调色板，比如用了via-amber-950但配色中只有amber-50～amber-900，该类将不生成对应 CSS
方向类有哪些合法值？哪些是假的
Tailwind 默认只生成 8 个方向类，全部映射到标准 CSS linear-gradient() 的方向关键词，不支持角度（如 to-45deg）或任意斜向缩写（如 to-tr 是合法的，但 to-br2 或 bg-gradient-to-45 无效）：
立即学习“前端免费学习笔记（深入）”；
- 基础四个：
to-r→to right，to-l→to left，to-t→to top，to-b→to bottom - 对角四个：
to-tl、to-tr、to-bl、to-br—— 注意，to-br存在，但to-b-r、to-bottom-right或bg-gradient-to-br-45都不会编译出规则 - 所有方向类都必须与
bg-gradient-to-前缀连用，单独写to-r没有意义
如何调试渐变不铺满或颜色不对
渐变“看起来没覆盖整个容器”，往往不是渐变类的问题，而是背景绘制范围或颜色定义出了偏差：
- 检查容器是否有明确高度：加
h-32、min-h-full或aspect-square等确保尺寸可见 - 避免在父级用
overflow: hidden，尤其当用了via-且过渡点靠近边缘时，容易被意外裁切 -
bg-opacity-对渐变无效：它只作用于background-color，而渐变是background-image，想调透明度得改色标，比如用from-blue-500/50（v3.3+ 支持斜杠语法，但需在 config 中启用 alpha 扩展）或内联style="background-image: linear-gradient(...)"写 rgba - 若颜色来自设计稿的十六进制（如
#6366f1），别硬套from-blue-500，要么扩展配色，要么直接用from-[#6366f1]任意值语法
