直接写bg-gradient-to-r无效，因它仅定义方向不提供颜色，必须搭配from-和to-色标；漏任一色标、元素无尺寸、父容器overflow:hidden或via-缺失上下文均会导致失效。
直接写 bg-gradient-to-r 不会显示任何渐变——它只定义方向，不提供颜色，必须搭配 from- 和 to- 才能生效。
为什么加了 bg-gradient-to-r 却看不到效果
最常见原因是只写了方向类，没指定起止色。Tailwind 的渐变工具类是「方向 + 色标」分离设计：bg-gradient-to-r 生成的是 background-image: linear-gradient(to right, )，括号为空，浏览器渲染为透明层，叠在白色背景上完全不可见。
- 漏
from-：起点缺失，渐变无锚点 - 漏
to-：终点缺失，CSS 退化为空值 - 元素无尺寸：空
<div></div>即使类完整也看不见（加h-32或aspect-square测试） - 父容器设了
overflow: hidden，via- 偏移或 padding 导致渐变被裁剪
from-、via-、to- 的生效条件和顺序
via- 不是可选修饰，它只在 from- 与 to- 同时存在时才起作用，且必须写在中间位置。Tailwind 检测到三者共存，才把 via- 插入到 CSS 渐变的 50% 位置（对应 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.config.js中已启用的调色板（如via-amber-950会失败，因默认无 950 阶）
方向类有哪些合法值？哪些写法根本不会编译
方向类决定渐变轴线，不可省略，且只能写一个。Tailwind 默认只生成 8 个标准方向类，全部映射到 CSS linear-gradient() 的方向关键词，不支持角度或任意缩写。
- 基础四个：
bg-gradient-to-r（→）、bg-gradient-to-l（←）、bg-gradient-to-t（↑）、bg-gradient-to-b（↓） - 对角四个：
bg-gradient-to-tl、bg-gradient-to-tr、bg-gradient-to-bl、bg-gradient-to-br - ❌ 无效写法：
bg-gradient-to-45deg、bg-gradient-to-right-bottom、bg-gradient-to-br-2、to-r（单独写无前缀） - ⚠️ 方向类必须紧邻其他渐变类；重复写（如
bg-gradient-to-r bg-gradient-to-b）会导致后者覆盖前者
渐变颜色超出默认调色板怎么办
Tailwind 默认的 from-/to- 只匹配 theme.colors 中定义的色阶。要用自定义色（如 #6366f1），不能硬写十六进制值，得走配置扩展。
- 在
tailwind.config.js的theme.extend.colors中添加命名色：myblue: '#4f46e5'，再用from-myblue - 若需带透明度，推荐扩展 rgba 值：
blue-500/50: 'rgba(59, 130, 246, 0.5)'，再用from-blue-500/50 - ⚠️
bg-opacity-50对渐变无效——它只作用于background-color，而渐变是background-image；透明度必须落在每个色标里
真正容易被忽略的是：渐变类本身不控制尺寸、不处理透明度、不自动适配深色模式，所有这些都得靠额外类或配置补全。写完 from-/to-/bg-gradient-to-* 只是起点，不是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
