opacity-类控制元素全局透明度，对应css opacity属性，取值0–1（如opacity-50→0.5），子元素继承且无法单独取消；需背景半透用bg-black/50，文字半透用text-opacity-50，动态透明度需内联样式或配置opacity-var。
直接用 opacity- 类就行，但必须清楚它只控制整个元素的全局透明度，不能单独调子元素或背景色。
opacity-类怎么用、对应什么值
Tailwind 的 opacity- 工具类映射的是 CSS 的 opacity 属性，取值是整数，对应 0–1 区间：opacity-0 → opacity: 0，opacity-50 → opacity: 0.5，opacity-100 → opacity: 1。默认支持的步长是 0、5、10、20、25、30……100，没有 opacity-15 或 opacity-33 这种类。
- 常见写法：
opacity-0（完全不可见但仍在文档流）、opacity-50（半透）、hover:opacity-75（悬停增强） -
opacity-0不等于隐藏：它仍占位、响应点击/聚焦事件；要彻底移除，得加hidden或用invisible - 所有子元素继承该透明度——文字、图标、边框、阴影全变淡，无法单独“取消”某个子元素的透明效果
想让背景半透而文字不透，别用 opacity-
用 opacity- 给卡片降透明度，结果文字也发灰，这是最典型的误用。正确做法是把透明度写进颜色本身：
- 背景半透：改用
bg-black/50（v3.0+ 支持），等价于background-color: rgb(0 0 0 / 0.5) - 文字半透：用
text-gray-500 text-opacity-50（需确保textOpacity插件已启用） - 边框半透：默认不支持
border-opacity-，得在tailwind.config.js里扩展borderColor，例如{ 'light': 'rgba(240, 240, 240, 0.5)' }，再用border-light
opacity-类在 hover/focus 里失效，大概率是覆盖问题
写了 hover:opacity-75 却没反应，不是 Tailwind 没生效，而是样式被更高优先级规则压掉了：
- 检查浏览器开发者工具中
opacity是否被划掉（被覆盖） - 避免混用内联
style="opacity: 1"和opacity-类——内联样式权重更高 - 确认
hover变体已启用（默认开启，但若自定义了variants配置可能关掉了） - 伪元素（如
::before）必须有content才能渲染，否则opacity不起作用
需要动态透明度？别硬塞 CSS 变量进 opacity-
opacity- 类是编译时静态生成的，不支持绑定 var(--my-alpha)。想用变量驱动，只有两个靠谱路径：
- 轻量方案：直接写内联样式，
style="opacity: var(--my-alpha, 1)"，变量可由 JS 设置：el.style.setProperty('--my-alpha', '0.3') - 复用方案：在
tailwind.config.js的theme.extend.opacity中加一条'var': 'var(--tw-opacity)'，之后就能用opacity-var类，但它和原生opacity-类互斥，不能共存 - 注意：无论哪种，都别忘了设默认值（
var(--x, 1)），否则未定义时会退成opacity: initial（即 1），行为不可控
真正容易被忽略的是：opacity 触发 GPU 合成层，频繁动画略重；而 bg-black/50 这类颜色级透明度不触发合成，性能更稳。选哪个，得看你要透明的是整个元素，还是仅某一部分属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
