<p>只写 bg-gradient-to-r 没效果，因为它仅声明线性渐变方向，不包含颜色信息，生成的是 from-transparent to-transparent 的不可见渐变；必须与 from-、to- 等颜色类组合使用且置于同一元素上才生效。</p>
只写 bg-gradient-to-r 为什么没效果
因为 bg-gradient-to-r 本身不带任何颜色信息，它只生成 background-image: linear-gradient(to right, ...) 的空壳声明。浏览器实际渲染的是 from-transparent to-transparent，叠加在默认白色背景上完全不可见。
必须同时提供至少两个颜色锚点类，且它们要和方向类写在同一个元素上：
-
from-和to-是必需的（两色渐变最低要求） -
via-只在三者齐全时才生效（from-+via-+to-） - 颜色类名必须存在于当前 Tailwind 配置的
theme.extend.colors中，比如via-amber-950在默认配置里不存在，编译后无对应 CSS 规则
bg-gradient-to-br 这类方向值怎么记、怎么用
Tailwind 的方向类全部映射标准 CSS linear-gradient(to X, ...) 语法，不是角度也不是像素坐标。所有合法值都以 to- 开头，后面跟方位关键词：
-
to-r→to right（左→右） -
to-b→to bottom（上→下） -
to-br→to bottom right（左上→右下） -
to-tl→to top left（右下→左上）
注意：to-0deg 或 to-45deg 不是合法值，不会被编译；对角线方向容易写反，比如想从左下到右上，应选 to-tr（tr = top-right），不是 to-bl。
立即学习“前端免费学习笔记（深入）”；
透明度怎么加进渐变里
Tailwind 支持用 /n 后缀控制颜色透明度，比如 from-white/0、to-blue-500/80。这比手写 rgba() 更快，但要注意：
-
/0表示 0% 透明度（即完全透明），/80表示 80% 透明度（即 20% 不透明） - 不能混用：写成
from-transparent via-white/0 to-blue-500是合法的；但from-transparent/50会失效——/n只支持挂载在具名色类后，不支持挂载在transparent上 - 深色模式下，
via-white/0可能渲染为灰黑色，建议改用via-bg/0或明确指定via-slate-900/0
渐变边框和渐变文字怎么绕过限制实现
Tailwind 没有 border-gradient 或 text-gradient 原子类，但可以用组合技巧达成视觉等效效果：
- 渐变边框：用双层结构 — 外层
bg-gradient-to-r from-cyan-400 to-blue-500 p-1 rounded-lg，内层bg-white rounded-lg overflow-hidden，p-1就是“边框厚度” - 渐变文字：必须配合
text-transparent+bg-clip-text，再加方向类，例如bg-gradient-to-b from-white via-blue-100 to-blue-300 bg-clip-text text-transparent - 移动端 Safari 对
from-transparent渲染偶有闪烁，可在外层加will-change: background缓解
这些都不是“真渐变属性”，而是利用 CSS 层叠和裁剪机制模拟出来的，所以一旦修改 DOM 结构或移除某一层类名，效果就立刻消失——这点容易被忽略。
