Tailwind 默认不提供 mix-blend-mode 工具类，需手动在 @layer utilities 中定义如 .mix-multiply 等类；生效需满足三前提：目标元素下方有可见内容、未被 isolation 或 opacity/filter 隔离、避免与 opacity 共用。
Tailwind 默认不提供 mix-blend-mode 工具类，写了 mix-blend-multiply 这类类名也不会生效——这不是你写错了，而是它压根不存在，且不能靠“猜类名”蒙对。
为什么直接写 mix-blend-multiply 没反应
常见错误现象：加了 mix-blend-multiply，文字或图片颜色完全没变化，DevTools 里看到 computed 值仍是 normal。
- 根本原因不是浏览器不支持，而是 Tailwind 根本没生成这个 CSS 规则——它默认跳过所有混合模式类，因组合爆炸（15+ 种 mode × 响应式断点 × 伪类）和低使用率
- 即使你手动在 HTML 中写
style="mix-blend-mode: multiply"生效了，也说明问题不在渲染引擎，而在 Tailwind 的 class 映射缺失 - 更隐蔽的干扰：父容器有
opacity、transform或filter，会创建独立层叠上下文，直接切断混合链，此时哪怕类存在也白搭
如何安全注入 mix-blend-mode 类
别装插件，也别在组件里用 @apply mix-multiply（会导致重复生成、无法响应式），就在 src/styles.css 里 @tailwind utilities 前加一段 @layer utilities：
@layer utilities {
.mix-multiply { mix-blend-mode: multiply; }
.mix-screen { mix-blend-mode: screen; }
.mix-overlay { mix-blend-mode: overlay; }
.mix-difference { mix-blend-mode: difference; }
.mix-lighten { mix-blend-mode: lighten; }
}
- 只注入你真正在用的几个 mode，避免 bloated CSS
- 类名前缀用
mix-而非blend-，和官方命名习惯一致，也方便未来升级时迁移 - 如果需要响应式支持（如
md:mix-screen），确保tailwind.config.js中plugins: [require('@tailwindcss/forms')]之类插件没意外覆盖utilities层
mix-blend-mode 生效的三个硬性前提
mix-blend-mode 不是“设了就 Blend”，它依赖严格的视觉堆叠关系：
立即学习“前端免费学习笔记（深入）”；
- 目标元素必须有「背后内容」：它得叠在另一个可见元素（比如
<video>、带背景色的<div>或 body 背景）之上，纯白页面 + 单个文字 div = 无背景可混 - 不能被
isolation: isolate隔离：如果某个祖先元素显式设了isolation: isolate，它会主动退出混合上下文；而没设又可能被 opacity/filter 暗中提层——用 DevTools 的 “Layers” 面板确认是否在同一合成层 - 避免和
opacity共用：两者叠加大概率导致混合失效 + 滚动卡顿；改用text-black/70或bg-black/20（它们编译为 rgba，不触发新层叠上下文）
background-blend-mode 和 mix-blend-mode 别混用
名字像，但作用对象完全不同，强行套用只会浪费调试时间：
-
background-blend-mode只管一个元素自身的多层背景（比如bg-gradient-to-r from-blue-400 to-purple-600+bg-[url('img.png')]），和外部元素无关 -
mix-blend-mode是让整个元素（含文字、子元素、边框）跟它「下方 DOM 树中视觉上在它后面的那些元素」混合，比如文字跟底下的视频混合 - 它们可以共存：先算
background-blend-mode把自身背景图层揉好，再用mix-blend-mode把整个结果跟下层内容混合——但顺序不能反
最容易被忽略的一点：混合效果高度依赖具体像素值，同一段 CSS 在深色模式、不同屏幕亮度、甚至 Safari 和 Chrome 下都可能呈现差异；上线前务必在真机 + 夜间模式下实测，而不是只看本地开发页。
