bg-gradient-to-r 表示从左到右水平渐变，bg-gradient-to-b 表示从上到下垂直渐变；二者方向不同，且 tailwind 仅默认支持 to-r/to-l/to-t/to-b 四个基础方向，不支持斜向或角度渐变。
bg-gradient-to-r 和 bg-gradient-to-b 有什么区别
方向决定渐变轴线走向，bg-gradient-to-r 是从左到右水平渐变，bg-gradient-to-b 是从上到下垂直渐变。Tailwind 默认只生成这 4 个基础方向类：to-r、to-l、to-t、to-b，不支持斜向（如 to-tr）或角度（如 to-45deg），除非你手动扩展配置。
常见误用是以为 bg-gradient-to-br 存在——它不存在，直接写会无效。若真需要对角渐变，得在 tailwind.config.js 的 theme.gradientColorStops 或自定义 backgroundImage 中补全。
如何用 bg-gradient-to-* 搭配颜色工具类生效
渐变色必须配合至少两个颜色停止点（color stop）才可见，仅写 bg-gradient-to-r 不会显示任何颜色。Tailwind 要求你显式指定起始和结束色，例如：
<div class="bg-gradient-to-r from-blue-500 to-purple-600"></div>
其中 from-* 对应第一个色标，to-* 对应最后一个色标。中间可插入任意数量的 via-* 类（如 via-cyan-400）来添加过渡色标。
-
from-必须存在，否则无起点色 -
to-必须存在，否则无终点色 -
via-可选，但最多只支持一个（Tailwind 默认配置下） - 所有颜色类必须来自你配置中启用的调色板（如
blue-500在theme.colors.blue中定义）
为什么加了 bg-gradient 却看不到渐变效果
最常被忽略的是元素没有「尺寸」或「内容」：渐变背景默认铺满整个盒模型，但如果容器 height: 0、padding 为 0 且内部无内容，视觉上就是空白。
另一个高频原因是父级设置了 overflow: hidden，而渐变区域超出容器边界（尤其用 via- 做非均匀过渡时）。此外，某些 CSS 重置库（如 Normalize.css）可能意外覆盖 background-size，导致渐变被压缩成一条线。
调试建议：
- 先给元素加
h-32或min-h-[200px]确保有高度 - 临时加上
border border-red-400看容器是否真的渲染出来了 - 检查 DevTools 中 computed 样式里
background-image是否生成了linear-gradient(...) - 确认 Tailwind 版本 ≥ 3.0 —— 旧版不支持
via-，也不支持深色模式下的渐变自动适配
能否在 dark: 下切换渐变色
可以，但必须对每个颜色工具类单独加前缀，比如：
<div class="bg-gradient-to-r from-blue-500 to-purple-600 dark:from-indigo-800 dark:to-purple-900"></div>
注意：dark:from- 和 dark:to- 必须成对出现，否则暗色模式下可能只剩一个色标，导致渐变断裂甚至退化为纯色。Tailwind 不会自动把 from-blue-500 映射为暗色对应值；一切需手动定义。
如果你启用了 darkMode: 'class'（而非 'media'），还要确保根元素有 dark 类，否则 dark: 变体不会触发。
复杂点在于：渐变方向类（如 bg-gradient-to-r）本身不可变体，它不随 dark 切换——方向是固定的，只有颜色部分能响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
