Tailwind的bg-gradient-类仅控制渐变方向，必须与from-/via-/to-颜色类组合使用才能生效；单独使用或拆分到父子元素均无效，且需注意暗色模式下对应颜色类也要加dark:前缀。
tailwind 的 bg-gradient- 类怎么用
Tailwind 的渐变背景工具类不是“开箱即用”的完整渐变，而是只控制**渐变方向**的修饰符，比如 bg-gradient-to-r、bg-gradient-to-br。它本身不定义颜色，必须配合 from-*、via-*、to-* 这三类颜色工具类才能生效。
常见错误是只写 bg-gradient-to-r，页面没变化——因为没有指定起止色，CSS 生成的渐变其实是 from-transparent to-transparent，肉眼不可见。
-
bg-gradient-to-r：从左到右（等价于linear-gradient(to right, ...)） -
bg-gradient-to-tr：从左下到右上（注意不是to-tl，tr= top-right） -
bg-gradient-to-b：从上到下（最常用，适合全屏背景） - 对角线方向如
to-bl（bottom-left）、to-br（bottom-right）容易写反，建议查文档或试渲染
颜色类必须和渐变方向类写在同一个元素上
Tailwind 的渐变工具类是“组合生效”的，from-blue-500 单独写在元素上不会产生任何渐变效果，它只在存在 bg-gradient-* 前缀类时才被解析为渐变起点色。
也别试图把方向类和颜色类拆到父子元素上——CSS 渐变是背景属性，不能靠继承实现。下面这样写无效：
立即学习“前端免费学习笔记（深入）”；
<div class="bg-gradient-to-r"> <div class="from-red-400 to-purple-500">文字</div> </div>
正确写法是全部堆在同一个元素的 class 属性里：
<div class="bg-gradient-to-r from-red-400 via-orange-400 to-purple-500 h-32"></div>
注意：via-* 是可选的；如果省略，就是两色线性渐变；加上后变成三色过渡，视觉更平滑。
自定义渐变色不在默认调色板里怎么办
Tailwind 默认的 from-*/to-* 只覆盖 colors 配置里的色值。如果你要用 #6366f1（indigo-500）之外的色，有两条路：
- 在
tailwind.config.js的theme.extend.colors里加一个命名色，比如myblue: '#4f46e5'，然后就能用from-myblue - 直接写内联
style覆盖：<div class="bg-gradient-to-r" style="background-image: linear-gradient(90deg, #4f46e5, #818cf8)">
第二条更轻量，适合临时调试或设计稿强约束场景。但要注意：内联 style 会覆盖所有工具类的 background-image，包括其他 bg-gradient- 类，所以别混用。
渐变背景在暗色模式下怎么适配
Tailwind 的暗色模式前缀（dark:）对渐变类完全有效，但要注意颜色工具类也要同步加前缀，否则暗色下还是亮色渐变：
<div class="bg-gradient-to-r from-blue-400 to-indigo-600 dark:from-cyan-400 dark:to-teal-600"></div>
别漏掉 dark:from-* 和 dark:to-* ——只加一个会导致明暗模式下颜色断裂。另外，via-* 同样需要加 dark:via-* 才能完整过渡。
如果项目用的是 class 切换（非 prefers-color-scheme），确保你的暗色 class（比如 dark-mode）已正确注入到 <html> 或根节点，并在 Tailwind 配置中启用了 darkMode: 'class'。
