CSS变量无法控制mix-blend-mode值，因其为关键字型属性，不支持var()；需用预设工具类（如.mix-overlay）配合JS切换class或data属性实现动态混合模式。
不能直接用 CSS 变量控制 mix-blend-mode 的值——它不接受 var(--mode) 作为合法值，浏览器会忽略该声明。
mix-blend-mode 不支持 CSS 变量动态赋值
这是 CSS 规范限制：mix-blend-mode 是一个**关键字型属性**（只接受 multiply、screen 等固定枚举值），不是可计算的数值或颜色类属性，因此无法被 var() 替换。即使写成 mix-blend-mode: var(--blend, multiply);，现代浏览器（Chrome/Firefox/Safari）也一律降级为 normal 或静默失效。
- 常见错误现象：开发者在 :root 中定义
--blend: overlay，然后在元素上写mix-blend-mode: var(--blend)，结果混合完全没反应 - DevTools 中能看到该声明被划掉（strikethrough），提示 “Invalid property value”
- 这不是 Tailwind 或构建工具的问题，是原生 CSS 引擎层面的限制
真正可行的变量驱动方案：用 class 切换 + 预设 utility 类
想实现“通过变量切换混合模式”，本质是把变量逻辑落到 class 层级，而非 CSS 属性值本身。Tailwind 用户应沿用其原子化思路，配合少量自定义 @layer utilities：
- 在
src/styles.css的@tailwind 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; } } - 再用 JS 控制 class：
el.classList.toggle('mix-overlay', isOverlayMode)，或结合 data 属性 + attribute selector 写响应式规则 - 若需服务端/构建时切换（如主题色对应不同混合模式），可用 PostCSS 插件或构建脚本生成多套 class 名，避免运行时 JS 介入
为什么不用 inline style + setAttribute？
有人尝试 el.style.mixBlendMode = 'overlay' 动态设置，这确实能生效，但存在硬伤：
立即学习“前端免费学习笔记（深入）”；
- 无法与 Tailwind 的响应式前缀（如
md:mix-screen）共存——inline style 优先级高于所有外部 class - 无法触发伪类（
group-hover:mix-difference）或动画过渡（mix-blend-mode不支持 transition） - 维护成本高：每个切换点都要手写 JS 绑定，失去 CSS 声明式的可预测性
容易被忽略的关键点：isolation 和 stacking context 必须同步管理
哪怕 class 切换正确，mix-blend-mode 仍可能突然失效——90% 情况下是因为父容器意外创建了新 stacking context（比如加了 transform、filter 或 opacity: 0.99）。此时必须显式加 isolation: isolate 到混合元素自身或其最近的、无干扰的祖先上。别指望变量或 class 能自动修复这个层级问题；它得单独写进样式层，且不能被覆盖。
