渐变背景不生效几乎总是因为方向类和色标类没凑齐或未被Tailwind扫描到：bg-gradient-to-r单独使用无效，必须与from-、to-同写于一元素，缺一不可；via-仅在from-+via-+to-三者共存时生效，且颜色须在配置中启用。
渐变背景不生效，**几乎总是因为方向类和色标类没凑齐、或根本没被 Tailwind 扫描到**——不是 CSS 写错了，而是类名压根没进最终 CSS 文件，或者写了但浏览器收不到完整声明。
bg-gradient-to-r 单独写等于没写
它只生成 background-image: linear-gradient(to right, )，括号里空着，等价于 from-transparent to-transparent。叠在白色背景上，肉眼完全不可见。
- 必须和
from-、to-写在同一元素上，缺一不可 -
from-blue-500 to-purple-600是最小有效组合；只写from-blue-500或只写to-purple-600都会退化为空渐变 - 方向类（如
bg-gradient-to-br）不能重复写，后写的会覆盖前写的
via- 类为什么总不生效
via- 不是“可选增强”，而是三元组的中间一环：只有 from- + via- + to- 同时存在，Tailwind 才会把 via- 插入为 50% 色标；少一个，via- 就被忽略。
- ❌
from-cyan-400 via-emerald-500→ 缺to-，via-失效 - ❌
via-amber-950 to-rose-500→ 缺from-，via-失效 - ⚠️
via-颜色必须存在于tailwind.config.js的theme.colors中，比如默认没有amber-950，写了也编译不出 CSS
类名写了但浏览器里看不到规则
这是最隐蔽的问题：DOM 元素上有 class="bg-gradient-to-r from-blue-500 to-purple-600"，但开发者工具里查不到对应 CSS 规则——说明 Tailwind 根本没把它打包进去。
立即学习“前端免费学习笔记（深入）”；
- 检查
tailwind.config.js的content字段是否覆盖了当前文件路径，例如 Vue 的.vue文件、React 的.tsx文件 - 动态拼接的类名（如
class="bg-gradient-to-r from-${color}-500 to-${endColor}-600"）不会被扫描，得用safelist显式声明 - HTML 属性名写成
clas（漏掉s）会导致整个 class 属性被浏览器忽略，所有 Tailwind 类都不生效
渐变显示不全或被裁掉
不是渐变写错了，而是容器本身没尺寸、或父级截断了渲染区域。
- 空
<div></div>即使加了完整渐变类，也因高度为 0 而不可见；加h-32、aspect-square或min-h-full测试 - 父容器设了
overflow: hidden，而via-偏移或 padding 导致渐变区域溢出，就会被裁切 -
bg-opacity-对渐变无效（它只作用于background-color），要调透明度得改色标，比如from-blue-500/50
真正卡住人的地方，往往不在「怎么写」，而在「为什么写的没进 CSS」——先确认类名被扫描到了，再看组合对不对，最后才调视觉表现。
