Tailwind CSS 不支持 text-gradient 工具类，需手动组合 bg-gradient-text、bg-clip-text 和 text-transparent 实现；Safari 旧版本需加 -webkit-background-clip: text 前缀，且避免与 transform、filter、text-shadow 同时使用。
为什么直接用 text-gradient 不生效
Tailwind CSS 默认不提供 text-gradient 这类工具类，你写上去毫无反应——它根本不存在。渐变文字本质是靠 background-clip: text + color: transparent 实现的，Tailwind 没封装这组组合，得手动补。
如何手写一个可用的渐变文字类
在 tailwind.config.js 的 theme.extend 里加自定义文本渐变工具类：
module.exports = {
theme: {
extend: {
backgroundImage: {
'gradient-text': 'linear-gradient(90deg, #3b82f6, #8b5cf6)',
},
},
},
}
然后在 HTML 中组合使用：
class="bg-gradient-text bg-clip-text text-transparent"
立即学习“前端免费学习笔记（深入）”；
-
bg-gradient-text提供渐变背景（必须先定义） -
bg-clip-text把背景“裁剪”到文字轮廓内（注意：部分旧版 Safari 需要-webkit-background-clip: text） -
text-transparent让文字颜色透明，才能透出背景渐变
哪些浏览器或场景容易出问题
渐变文字在移动端或低版本浏览器上容易失效，常见表现是文字变黑/变白/直接消失：
- Safari 15.4 以下不支持
background-clip: text，必须加-webkit-background-clip: text前缀（Tailwind 本身不自动加） - 如果父元素有
transform或filter，可能触发渲染层叠问题，导致渐变被截断 - 用在
button或input上时，某些 UA 样式会重置color或background-clip，需额外覆盖 - 不能和
text-shadow共存——透明文字+阴影会把阴影也“透”出来，视觉混乱
要不要用插件？@tailwindcss/typography 不行，tailwindcss-text-fill 已停更
官方 @tailwindcss/typography 只处理富文本排版，不提供渐变；社区曾有 tailwindcss-text-fill 插件，但已归档且不兼容 v3.3+。目前最稳的方式还是自己配 backgroundImage + 手动组合 class。如果项目中大量使用，建议抽成 @layer utilities 里的复用类，避免每次重复写三段。
真正麻烦的不是写法，而是每次都要确认 bg-clip-text 是否被父容器的 stacking context 干扰，这点很容易被忽略。
