不能直接用 text-blue-500 text-yellow-400 实现双色调，因为双色调需 SVG 渐变（linearGradient/radialGradient）配合 fill 引用，而 Tailwind 文本类仅作用于 color 属性，不控制 SVG 的 fill 且 SVG 不继承父级文字颜色。
为什么不能直接用 text-blue-500 text-yellow-400 实现双色调？
双色调（Duotone）不是简单叠加两个文字颜色——它依赖 SVG 的 <lineargradient></lineargradient> 或 <radialgradient></radialgradient> 定义两个色标，并通过 fill 引用该渐变。纯 Tailwind 的文本类（如 text-*）只作用于 color 属性，对 SVG 内部的 fill 无影响；且 SVG 元素默认不继承父级文字颜色。
如何让 SVG 图标支持双色调并复用 Tailwind 颜色系统？
核心思路是：把图标内联为 SVG，用 fill="url(#duo)" 指向一个动态定义的 <defs></defs> 渐变，再通过 CSS 变量注入 Tailwind 色值。实际操作分三步：
- 在 HTML 根或公共布局中插入一个空的
<svg><defs></defs></svg>容器（不可 display: none，需保留在 DOM 中） - 用 JS 动态创建
<lineargradient id="duo"></lineargradient>并注入两个 CSS 变量，例如--tw-duo-start: #3b82f6和--tw-duo-end: #f59e0b - 在图标 SVG 中写
fill="url(#duo)"，同时确保该 SVG 未设置fill行内属性覆盖它
示例片段：
<svg viewBox="0 0 24 24" class="w-6 h-6"> <path d="M12 2L2 7l10 5 10-5-10-5z"/> <path d="M2 17l10 5 10-5M2 12l10 5 10-5"/> </svg>
此时它不会自动变双色调——必须配合 JS 注入渐变和变量，否则只是单色。
立即学习“前端免费学习笔记（深入）”；
用 @layer utilities 扩展 Tailwind 支持双色调类名？
可以，但仅限于控制渐变方向/锚点，无法替代 SVG 内部的 fill 绑定。Tailwind 本身不解析 SVG 结构，所以像 duo-x、duo-y 这类类名只能生成 CSS 变量，不能直接改 SVG 的 <stop></stop> 偏移。
推荐做法是在 tailwind.config.js 的 theme.extend.variables 中预留变量，再配合自定义插件生成对应类：
module.exports = {
theme: {
extend: {
variables: {
'--tw-duo-start': '#3b82f6',
'--tw-duo-end': '#f59e0b',
}
}
},
plugins: [
function({ addUtilities }) {
addUtilities({
'.duo-v': {
'background': 'linear-gradient(to bottom, var(--tw-duo-start), var(--tw-duo-end))',
},
'.duo-h': {
'background': 'linear-gradient(to right, var(--tw-duo-start), var(--tw-duo-end))',
}
})
}
]
}
注意：这些类作用于容器背景，不是 SVG 填充——真正生效仍需 SVG 自身引用渐变 ID。
直接复制 Font Awesome Pro 双色调 SVG 时最常踩的坑
Font Awesome Pro 的双色调 SVG 默认带 fill="currentColor" 和两层 <path></path>（前景/背景），靠 fa-duotone 类切换 fill 值。若你手动复制其 SVG 到项目中，容易忽略以下三点：
- 遗漏
<style></style>块里定义的.fa-primary/.fa-secondary类，导致双色失效 - 没把图标包裹在
<span class="fa-duotone"></span>容器中，而该容器负责提供currentColor的上下文 - 未启用 Font Awesome 的 JS 加载器（
fontawesome-svg-core），导致fa-duotone类无法动态注入样式
更轻量的做法是：只复制 SVG 的 <path></path>，删掉所有 class 和 style，改用 fill="url(#duo)" + 外部渐变定义——这样完全脱离 Font Awesome 运行时依赖，也更容易与 Tailwind 颜色系统联动。
