tailwind 默认不生成 mix-blend-mode 和 background-blend-mode 工具类，因其组合爆炸且使用率低；需手动在 @layer utilities 中添加带 isolation: isolate 的 mix- 类，或在 config 中扩展 backgroundblendmode 并启用插件。
Tailwind 默认不提供 mix-blend-mode 或 background-blend-mode 工具类，写了 mix-multiply、bg-blend-overlay 这类类名不会生效——不是你写错了，而是它压根没被生成。
为什么直接加 mix-blend-multiply 没反应
根本原因不是浏览器不支持，而是 Tailwind 的 JIT 引擎默认跳过所有混合模式类：组合爆炸（15+ 种 mode × 断点 × 伪类）+ 低使用率，官方选择不预置。DevTools 里看到 computed 值仍是 normal，说明 CSS 规则根本没生成。
更隐蔽的干扰包括：
- 父容器用了
opacity、filter或transform，会暗中创建独立层叠上下文，切断混合链 - 目标元素背后没有真实像素内容（比如纯白页面上单个文字
div），mix-blend-mode就无背景可混 - 误把
mix-blend-mode当成子元素间混合——它只作用于「当前元素内容」与其「背后堆叠上下文」，不是内部 children 之间
如何安全注入 mix-blend-mode 类
别装插件，也别在组件里用 @apply mix-multiply（会导致响应式变体冗余、无法热更新）。就在 src/styles.css 中 @tailwind utilities 前加一段 @layer utilities：
@layer utilities {
.mix-multiply { mix-blend-mode: multiply; isolation: isolate; }
.mix-screen { mix-blend-mode: screen; isolation: isolate; }
.mix-overlay { mix-blend-mode: overlay; isolation: isolate; }
}
关键点：
- 每个类都显式带
isolation: isolate，避免兄弟/父级元素意外参与混合 - 只注入你真正在用的几个 mode，不贪多；前缀统一用
mix-，和社区习惯一致 - 不要用
@apply在组件内硬写，尤其搭配group-hover或md:mix-multiply时，CSS 输出极易失控
background-blend-mode 必须手动配置且依赖多图层
bg-blend-multiply 类在 Tailwind v3.4+ 才支持，但默认关闭。必须两步走：
1. 在 tailwind.config.js 中扩展并启用插件：
module.exports = {
theme: {
extend: {
backgroundBlendMode: {
multiply: 'multiply',
screen: 'screen',
overlay: 'overlay',
}
}
},
plugins: [
require('@tailwindcss/forms'), // 必须，它是解析 backgroundBlendMode 的依赖
]
}
2. 配置后必须重启开发服务器，JIT 不会热更新这类扩展。
更重要的是 HTML 结构必须满足混合前提：
- 元素需同时声明 ≥2 个独立背景图层，例如：
bg-[url('/img.jpg')] bg-black/30（注意：不是bg-blue-500 bg-[url()]，后者会被合并为一层） - 颜色层必须是半透明值（如
bg-black/20生成rgba(0,0,0,0.2)），纯黑或transparent在multiply下等效于全黑，压死细节 - 确认图片加载成功——
background-image值为空或 404，混合就无从谈起
混合生效前必须验证的三个硬性前提
无论用 mix-blend-mode 还是 background-blend-mode，缺一不可：
- 目标元素背后有可见内容（视频、多背景层、body 背景色等），不能是空画布
- 未被
isolation: isolate显式隔离（对mix-blend-mode是必须加；对background-blend-mode则要确保遮罩层没意外提层） - 没和
opacity共用——哪怕设了opacity: 0.99，也会强制创建新合成层，断掉混合链
最易被忽略的是：mix-blend-mode 启用后，浏览器会强制新建 stacking context，原本靠 z-index 控制的层级可能失效，文字突然被兄弟元素盖住——这时得显式加 z-10 或调整 DOM 顺序，而不是反复调 blend mode。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
