必须在 tailwind.config.js 中手动启用 backgroundClip 扩展并配置 bg-clip-text，否则不生成 CSS；文字渐变需严格按 bg-gradient- → bg-clip-text → text-transparent 顺序书写；描边须用 -webkit-text-stroke 配合 color: transparent，不可与 text-transparent 共存；暗色模式下应改用 dark:from- / dark:to-* 调整渐变色，避免 overflow-hidden 干扰渲染。
tailwind.config.js 必须手动启用 backgroundClip 扩展
直接写 bg-clip-text 不会生成任何 CSS 规则——Tailwind v3.4+ 默认不注册该工具类，哪怕你写了，编译后 background-clip: text 和 -webkit-background-clip: text 都不存在。这不是浏览器问题，是配置缺失。
必须在 tailwind.config.js 中显式扩展：
module.exports = {
theme: {
extend: {
backgroundClip: {
text: 'text',
},
},
},
}
旧版本或自定义构建流程中，还需额外引入插件：require('tailwindcss-background-clip')。v3.4.9 实测仍需此步，别信“开箱即用”说法。
文字渐变三要素顺序不能错：bg-gradient-* → bg-clip-text → text-transparent
渐变文字不是加个背景就行，它依赖三个强耦合声明，漏一或错序，文字就变黑/灰/纯色：
-
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 按类名顺序生成 CSS，background-clip 必须作用于已声明背景的元素上。
描边要用 -webkit-text-stroke，但不能和 text-transparent 混用
Tailwind 没有原生描边工具类，text-stroke 是非标准属性，必须用 -webkit-text-stroke 前缀实现，且仅限 WebKit 内核（Chrome/Safari）支持。
关键约束：
- 描边必须配合
color: transparent才能呈现空心效果，但text-transparent类和-webkit-text-stroke在 Tailwind 中无法共存——因为text-transparent会覆盖color，而-webkit-text-stroke依赖非透明文字作为基底 - 正确写法是手写 CSS 或用
@layer utilities注入，例如：.stroke-text { -webkit-text-stroke: 2px #333; color: transparent; } - 降级方案：对不支持
-webkit-text-stroke的浏览器，用text-shadow模拟描边，例如四方向 1px 黑影
深色模式下渐变失效？大概率是 dark:text-* 覆盖了 text-transparent
Tailwind 的暗色类（如 dark:text-white）优先级高于 text-transparent，一旦触发暗色模式，渐变立刻消失，只剩白色文字。
正确做法：
- 删掉所有
dark:text-*类（它们和渐变文字互斥） - 改用
dark:from-indigo-300 dark:to-cyan-400调整渐变色阶 - 确保加
dark:bg-clip-text，否则暗色模式下裁剪行为不触发 - 不要加
dark:text-transparent—— 多余且可能干扰
最容易被忽略的是父容器设了 overflow-hidden：文字显示为空白、只有一半渐变、或突然变纯色，大概率是这个原因。渐变文字只作用于真实文本节点，且依赖父级能正确绘制背景层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
