用bg-gradient-to-r配合from-transparent和to-black/20可实现从左到右的透明渐变，需确保元素有可见背景或内容；opacity类无法实现位置相关透明度变化，因其作用于整个元素。
用 bg-gradient-to-r 配合透明色值实现渐变透明
Tailwind 本身不提供「透明度渐变」的原子类（比如 from-transparent 到 to-black/50 这种），但你可以用背景渐变模拟——关键是把渐变起点或终点设为完全透明的色值。最常用的是 bg-gradient-to-r（从左到右）配合 from-transparent 和带 alpha 的目标色。
注意：必须确保元素有背景色（哪怕只是 bg-white）或内容可透出，否则渐变会失效；纯透明容器叠加在白色背景上，你看不出变化。
-
from-transparent等价于rgba(0,0,0,0)，不是「无背景」，而是「透明背景层」 - 终点推荐用带斜杠 alpha 的写法，比如
to-black/20，而不是过时的to-black-200（后者是不同灰阶，不是透明度） - 渐变方向要匹配遮罩意图：顶部遮罩用
bg-gradient-to-b，左侧文字淡出用bg-gradient-to-r
为什么 opacity 类不能做渐变？
opacity 是作用于整个元素及其子树的 CSS 属性，它没有空间维度，无法按位置变化。你给一个 div 加 opacity-50，整块都半透；想实现「左边全透、右边半透」，必须换思路——用渐变背景盖一层蒙版，或者用 mask-image（但 Tailwind 默认不支持）。
常见误操作：class="opacity-0 to-opacity-100" 完全无效，因为 opacity- 不是渐变类，也没有 to- 变体。
立即学习“前端免费学习笔记（深入）”；
- Tailwind 的
opacity-系列（如opacity-0、opacity-75）只生成opacity: 0或opacity: 0.75 - 渐变类只存在于
bg-gradient-、from-、via-、to-命名空间下 - 如果真需要基于 opacity 的动态控制，得用 JS +
style.opacity手动插值，不适合静态遮罩场景
实际遮罩文字溢出的典型写法
比如一段长文本需要右侧自然 fade-out，常见做法是用伪元素或额外容器盖一层渐变。直接在文字容器上加渐变背景会干扰文字颜色，所以更稳妥的是套一层绝对定位的遮罩层：
<div class="relative w-64 h-12"> <div class="text-sm truncate">这是一段超长的文字内容，超出部分应该淡出</div> <div class="absolute inset-y-0 right-0 w-12 bg-gradient-to-l from-white to-transparent"></div> </div>
这里关键点：遮罩层用 bg-gradient-to-l（从右往左渐变），让右边不透明、左边透明，从而「吃掉」文字右侧边缘。如果父容器背景不是白色，记得把 from-white 换成对应背景色，比如 from-gray-50 或 from-slate-900。
- 遮罩层必须
absolute且z-index高于文字（默认同层即可，因后写的元素层叠更高） - 不要用
from-transparent to-white，那会让右边透明、左边白，遮不住文字 - 宽度（
w-12）决定淡出范围，太宽会吞掉太多文字，太窄则过渡生硬
兼容性与性能提醒
所有现代浏览器都支持 background: linear-gradient(...) 和 / alpha 语法（如 black/30），但旧版 Safari（to-#0000004D（等价于 black/30）。
性能上，这种纯 CSS 渐变遮罩几乎无开销；但若在滚动区域里大量使用（比如列表项每行都加），建议加 will-change: background 或确保遮罩层是 position: absolute 以触发合成层。
- 避免在
hover动画中频繁切换渐变类，会引起重绘；如需交互动态透明，优先考虑transition-opacity+ 单一opacity - SSR 或静态站点生成时，确保 Tailwind 已启用
darkMode: 'class'并配置了对应暗色渐变（如from-gray-900） - 真正复杂的透明度形状（如径向遮罩、不规则蒙版）得用
mask-image: radial-gradient()，但需手写 CSS，Tailwind 不内置
