bg-clip-text 类默认不可用，需在 tailwind.config.js 中显式扩展 backgroundClip；渐变文字需三要素：背景、bg-clip-text、text-transparent，顺序不可错；深色模式下须用 dark:text-transparent 或暗色渐变；Safari 等需 -webkit- 前缀。
bg-clip-text 类默认不可用，必须手动启用
直接写 bg-clip-text 不会生效——Tailwind v3.4+ 默认不注册该工具类，即使你写了，编译后 CSS 里压根没有 background-clip: text。这不是浏览器兼容问题，是配置缺失。
需在 tailwind.config.js 中显式扩展：
module.exports = {
theme: {
extend: {
backgroundClip: {
text: 'text',
},
},
},
// v3.4+ 可省略插件；若用旧版或自定义构建，需加：
// plugins: [require('tailwindcss-background-clip')],
}启用后，bg-clip-text 才真正可用。别信“某些文档说开箱即用”，实测 v3.4.9 仍需此步。
三要素缺一不可，且顺序不能错
渐变文字不是“加个渐变背景就行”，它依赖三个独立但强耦合的声明：背景、裁剪、透明。漏掉任一，文字就变黑/灰/纯色。
立即学习“前端免费学习笔记（深入）”；
-
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 —— 多数浏览器会忽略裁剪，渲染成纯蓝底黑字。
深色模式下文字会“突然变白”，因为 dark:text-* 覆盖了 text-transparent
Tailwind 的暗色类（如 dark:text-white）优先级高于 text-transparent，一旦触发暗色模式，渐变立刻消失，只剩白色文字。
正确做法是统一用暗色适配版：
- 删掉所有类似
dark:text-white的类 - 改用
dark:bg-clip-text dark:from-indigo-300 dark:to-cyan-400 - 或更稳妥地：加
dark:text-transparent显式覆盖
注意：dark:bg-clip-text 本身不改变颜色，只启用裁剪；颜色由 dark:from-*/dark:to-* 控制。
Safari 和旧版 Chrome 必须加 -webkit- 前缀，否则完全不显示渐变
仅靠 bg-clip-text 和 text-transparent 在 Safari（包括 iOS）、部分 Android WebView 中会彻底失效——文字显示为默认黑色，背景渐变完全不透出。
根本原因是：background-clip: text 标准属性尚未被 Safari 全面支持，实际起效的是 -webkit-background-clip: text。
所以，你写的类必须等价于以下 CSS：
.bg-clip-text {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}如果你用的是自定义插件或 @layer utilities 注册，务必包含 -webkit- 版本；否则 Safari 用户看到的就是 plain text。
