bg-gradient-*类单独使用无颜色，因仅定义方向、不提供色标，必须搭配from-和to-才生效；漏写任一色标或元素无尺寸均导致不可见。
bg-gradient-*类为什么写了没颜色
直接写bg-gradient-to-r不会显示任何渐变——它只生成background-image: linear-gradient(to right, )，括号里为空，浏览器渲染为透明层，叠在默认背景上完全不可见。必须同时声明from-和to-色标，缺一不可。
- 漏
from-：起点缺失，渐变无锚点；漏to-：终点缺失，CSS 生成退化为空值 - 元素必须有明确尺寸（如
h-32、aspect-square），空div即使类完整也看不见 -
via-不是可选修饰，仅当from-与to-共存时才生效，且只能有一个（如via-purple-500），写两个会被忽略 - 方向类只支持标准组合：
to-r、to-br、to-t等；to-45deg或to-right-bottom不编译
background-blend-mode怎么写才真正生效
bg-blend-multiply这类类名默认不存在，Tailwind v3.4+ 要手动启用，且生效前提苛刻：必须有≥2个独立背景图层，且其中至少一个是半透明色层。写成bg-[url('/img.jpg')] bg-black/30 bg-blend-multiply才可能工作；bg-blue-500 bg-[url()]会失败——Tailwind 把颜色当 fallback，不视为第二图层。
- 配置必做：在
tailwind.config.js中添加backgroundBlendMode: { multiply: 'multiply' }，并确保已加载@tailwindcss/forms插件（它是解析该属性的依赖） - 重启 dev server，否则新类名不会被 JIT 扫描到
- 颜色层必须用带 alpha 的写法，如
bg-black/20（生成rgba(0,0,0,0.2)），纯黑bg-black或transparent在multiply下等效于全黑，压死图像细节 - 调试时看 DevTools 的 Computed 面板：若查不到
background-blend-mode: multiply，说明配置未生效；若background-image为空或 404，混合根本无从谈起
mix-blend-mode要不要加isolation
mix-blend-mode作用于元素内容与**其背后堆叠上下文**的混合，而非自身子元素。不加isolation: isolate时，父级或兄弟元素可能意外参与混合，导致视觉错乱。Tailwind 默认不提供isolation工具类，需手动注入。
- 推荐在
@layer utilities中定义：.mix-multiply { mix-blend-mode: multiply; isolation: isolate; } - 避免用
@apply在组件内硬写，尤其涉及响应式（如md:mix-multiply）或group-hover时，CSS 输出易失控 -
mix-blend-mode对性能较敏感：开启后浏览器需额外合成层，复杂布局中慎用于高频动画元素 - 注意 z-index 层级：混合只发生在同一 stacking context 内，跨 context（如弹窗浮层）通常不混合
渐变动画为什么animate-bg-gradient不存在
Tailwind 没有animate-bg-gradient，因为background-image本身不可动画化。所谓“渐变动画”，本质是移动background-position或缩放background-size，让静态渐变看起来在流动。
- 正确路径：用 arbitrary value 写完整渐变（如
bg-[linear-gradient(90deg,rgb(255,0,0),rgb(255,165,0),rgb(255,255,0))]），再配自定义@keyframes驱动background-position - 必须加
bg-[length:200%_200%]和bg-no-repeat，否则background-position位移无视觉变化 - 命名色（如
red、orange）在 keyframes 插值中不可靠，务必用rgb()或hsl()，且括号内不能有空格 - Arbitrary Value 若被静默忽略，大概率是语法错误（如未闭合括号、含非法字符）或未在
theme.extend.animation中注册对应动画名
bg-blend-multiply写对了但没生效，八成卡在这两步。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
