用Tailwind写从左到右线性渐变需组合bg-gradient-to-r与from-、to-类（如bg-gradient-to-r from-blue-500 to-purple-600），单独使用无效；via-仅在三色共存时生效，且颜色须在配置中启用。
如何用 Tailwind 的 gradient 类写一个从左到右的线性渐变
直接加 bg-gradient-to-r 就行，它会把背景变成从左（from）到右（to）的线性渐变，但注意：**它本身不定义颜色，必须配合 from-*、via-*、to-* 类一起用**，否则看不到效果。
常见错误是只写 bg-gradient-to-r，页面看起来和没写一样——因为默认的 from-transparent 和 to-transparent 叠加在白色背景上根本不可见。
-
bg-gradient-to-r from-blue-500 to-purple-600：蓝到紫，水平方向 -
bg-gradient-to-br from-yellow-300 to-red-500：左上到右下对角渐变（br= bottom-right） - 方向类只控制起点终点方位，不控制角度；想精确到 45deg，得用自定义 CSS 或插件
为什么 via- 类有时不生效
via- 表示中间色停靠点，但它**只在至少有三个色标时才起作用**：即同时存在 from-、via-、to-。如果漏掉任意一个，Tailwind 会忽略 via-，退化为两色渐变。
另外，via- 的颜色必须是 Tailwind 配置中已启用的色阶（比如 via-emerald-400 要求 emerald 在 theme.extend.colors 里被定义），否则编译后无对应 CSS 规则。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 - ❌ 无效：
bg-gradient-to-r from-cyan-400 via-purple-500（缺to-） - ⚠️ 编译失败：
via-amber-950（默认配色没有 950 阶）
渐变方向类有哪些可用值及对应 CSS background-image
Tailwind 的方向类本质是生成 linear-gradient(to X, ...)，X 是方向关键词。所有合法值都映射到标准 CSS 方向语法，不是像素或角度：
-
to-r→to right -
to-l→to left -
to-t→to top -
to-b→to bottom -
to-tl→to top left -
to-tr→to top right -
to-bl→to bottom left -
to-br→to bottom right
注意：to-r 和 to-0deg 不等价——后者不是 Tailwind 原生支持的方向类，强行写不会编译出有效规则。
遇到“渐变不覆盖整个容器”怎么办
这是最常被忽略的点：渐变背景默认只作用于内容区域（background-size: auto），如果容器有 padding、或子元素撑不开高度，渐变就会被裁切或留白。
解决方式不是改渐变类，而是确保背景绘制范围正确：
- 给容器设
min-h-full或h-screen（视布局而定） - 确认没有父级设置了
overflow: hidden且子容器超出 - 渐变类本身不改变盒模型，
bg-gradient-to-r和bg-red-500在尺寸行为上完全一致 - 若需径向渐变，Tailwind 默认不提供预设类，得用
bg-[radial-gradient(...)]自定义
方向类只是起点终点描述符，真正决定“哪里开始、哪里结束”的，是容器自身的宽高和 display 行为。
