tailwind的opacity工具类不支持css变量，需通过配置扩展（如theme.extend.opacity添加'var': 'var(--tw-opacity)'）或内联style="opacity: var(--my-alpha, 1)"实现动态透明度控制。
opacity工具类不支持CSS变量，必须用自定义配置扩展
Tailwind的opacity-工具类（比如opacity-50）底层是静态生成的固定值映射，无法直接绑定css var(--my-opacity)。想用变量控制透明度，得绕过默认工具类，走自定义CSS属性 + tailwind.config.js扩展或直接写内联样式。
方案一：在tailwind.config.js中注入CSS变量并生成对应工具类
适合需要复用、响应式或配合@apply的场景。核心是把变量值映射为实际opacity数值，并让Tailwind识别它：
- 在
tailwind.config.js的theme.extend.opacity里添加键值对，例如{ 'var': 'var(--tw-opacity)' } - 同时确保CSS中已定义该变量，比如
:root { --tw-opacity: 0.75; }或组件级style="--tw-opacity:0.3;" - 之后就能用
opacity-var这个类名生效，它会编译为opacity: var(--tw-opacity); - 注意：不能和原生
opacity-类混用（如opacity-50 opacity-var），后者会覆盖前者
方案二：直接用内联style + CSS变量（最轻量，无构建步骤）
适合动态值、JS驱动或快速验证。不需要改配置，但失去Tailwind的响应式前缀（如md:opacity-var）和@apply能力：
- 写法：
style="opacity: var(--my-alpha, 1);" - 变量可来自
:root、父元素或JS设置：el.style.setProperty('--my-alpha', '0.2') - 如果需响应式，得手动加媒体查询，例如
@media (min-width: 768px) { [class*='fade'] { opacity: var(--my-alpha-md, 0.5); } } - 别忘了设默认值（
var(--x, 1)），否则未定义时会退成opacity: initial（即1），可能不符合预期
常见坑：opacity变量不生效的三个原因
多数调试失败不是语法错，而是上下文或优先级问题：
- CSS变量作用域不对：父元素没声明
--tw-opacity，子元素又没继承（opacity本身不继承，但变量可以，前提是父元素设了且子元素用了var()） - 类名拼写错误：写了
opacity-custom但配置里注册的是opacity-var，Tailwind不会报错，只会忽略 - 浏览器兼容性：
opacity支持所有现代浏览器，但如果你在IE里用变量（IE根本不支持CSS变量），那整个var()表达式会被丢弃，回退到未设置opacity的状态（即1）
opacity-[var(--x)]能行，其实Tailwind解析器根本不会进这层括号。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
