不能直接用 text-fill-color 实现渐变文字，因其仅支持单色且 Tailwind 未提供该类；须用 bg-clip-text + background-gradient + text-transparent 组合实现。
不能直接用 text-fill-color 实现渐变文字——它只接受单色值，且 Tailwind 默认不提供该类；真正可行的路径是 bg-clip-text + background-gradient + text-transparent。
为什么 text-fill-color 在 Tailwind 中基本无效
Tailwind v3.4+ 官方未定义 text-fill-color 工具类，且该 CSS 属性本身不支持渐变值（只能设 solid color 或 transparent）。试图用 text-fill-color: linear-gradient(...) 会直接被浏览器忽略。所有“渐变文字”效果都必须绕过文字填充逻辑，改用背景裁剪机制。
bg-clip-text 必须配合 text-transparent 才能生效
仅加 bg-clip-text 不会显示渐变——因为文字默认有颜色（如 text-black），会完全盖住背景。必须显式设为透明：
-
text-transparent是必需的，不能用text-white opacity-0替代（opacity 影响整个元素，且不触发 background-clip） - 若已用其他
text-*类（如text-gray-800），需手动覆盖或删掉，否则冲突 - 在暗色模式下，
dark:text-white会覆盖text-transparent，应改用dark:text-transparent
渐变方向类与 bg-clip-text 的声明顺序很关键
Tailwind 按类名顺序生成 CSS，而 background-clip: text 必须作用于已定义背景的元素上。错误顺序会导致背景被裁剪前就渲染为纯色：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent - ❌ 失效：
bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 text-transparent（部分构建工具可能提前合并规则） - 若使用自定义渐变（
bg-[linear-gradient(...)]），确保它出现在bg-clip-text之前 - 避免嵌套在
group或peer触发器中动态添加bg-clip-text——背景类可能未同步更新
常见失效场景与快速排查点
文字显示为纯黑/纯白、渐变消失、或整个元素变空白，大概率是以下之一：
- 父容器有
overflow: hidden且文字带line-height或padding——裁剪了渐变背景的渲染区域，临时加overflow-visible测试 - 用了 Web 字体但未配
font-display: swap——字体加载期间回退到系统字体，-webkit-background-clip在某些字体下渲染异常 - 在伪元素（
::before/::after）上尝试应用——background-clip: text不支持伪元素，必须作用于含真实文本的标签（span、h1等） - 小字号（
text-xs或更小）下渐变糊成一片——这不是 bug，是 subpixel 渲染限制，建议最小用text-sm
最易被忽略的是：渐变文字在打印样式表（@media print）中默认不可见，因为 color: transparent 仍生效。如需打印友好，得额外写 @layer base { @media print { .bg-clip-text { color: inherit !important; } } }。
