bg-clip-text 在 Tailwind v3.4+ 中默认不启用，需在 tailwind.config.js 中配置 backgroundClip 扩展并引入插件，配合 bg-gradient-* 和 text-transparent 按序使用，且 Safari 等需手动加 -webkit- 前缀。
bg-clip-text 在 Tailwind 里默认不生效
直接写 bg-clip-text 不会生成任何 CSS 规则——Tailwind v3.4+ 默认不注册这个工具类，编译后连 -webkit-background-clip: text 和 background-clip: text 都没有。这不是浏览器兼容问题，是配置缺失。
必须在 tailwind.config.js 中显式启用：
module.exports = {
theme: {
extend: {
backgroundClip: { text: 'text' },
},
},
}
旧项目或自定义构建流程中，还需额外加插件：require('tailwindcss-background-clip')。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 → 渲染成蓝底黑字。
深色模式下渐变突然变白？不是失效，是被覆盖
Tailwind 的 dark:text-white 这类暗色类优先级高于 text-transparent，一旦触发 dark 模式，透明状态被覆盖，渐变立刻消失。
- 删掉所有
dark:text-*类（比如dark:text-white） - 改用
dark:bg-clip-text dark:from-indigo-300 dark:to-cyan-400调整渐变色阶 - 不需要加
dark:text-transparent—— 多余且可能干扰
注意：dark:bg-clip-text 本身不改变颜色，只确保暗色模式下裁剪行为被触发。
Safari 和部分旧版 Chrome 必须加 -webkit- 前缀
仅靠 bg-clip-text + text-transparent 在 Safari（含 iOS）、部分 Android WebView 中完全不显示渐变。Tailwind 不自动注入 -webkit-background-clip: text，必须手动补。
推荐做法：在全局 CSS 中加一层兜底：
.gradient-text {
-webkit-background-clip: text;
background-clip: text;
}
然后在 HTML 中组合使用：bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent gradient-text。别指望 PostCSS 或构建工具自动重排类名顺序——类名顺序 = CSS 声明顺序 = 渲染逻辑链。
最容易被忽略的点：渐变文字在 overflow-hidden 父容器里会截断边缘，在伪元素（::before/::after）中完全不生效——它只作用于真实文本节点，且依赖父级能正确绘制背景层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
