opacity工具类取值为0–100整数（对应opacity 0–1），仅支持预设值；opacity-0仅视觉隐藏，元素仍占位、响应事件；hover/focus失效常因样式覆盖或未启用变体；opacity影响整个元素及子元素，与rgba作用范围不同；自定义需修改配置文件。
opacity工具类的取值范围和实际效果
Tailwind 的 opacity- 工具类直接映射到 CSS 的 opacity 属性，取值是 0–100 的整数，对应 opacity 值 0–1（比如 opacity-50 → opacity: 0.5）。它不支持小数步进（如 0.15），也没有 opacity-15 这种类——只有预设的 0、5、10、20…100。
常见错误是以为 opacity-0 能让元素“完全消失且不占布局空间”，其实它只是视觉隐藏，元素仍参与文档流、响应事件（点击/悬停仍触发）。需要彻底移除交互和布局影响时，得配合 hidden 或 invisible。
-
opacity-0：透明但保留尺寸、事件监听、可聚焦 -
invisible：透明 + 不响应事件，但依然占位 -
hidden：从渲染树移除，不占位、无事件、不可聚焦
为什么opacity-xx在hover/focus状态里经常失效
因为 Tailwind 默认只生成基础状态的 opacity 类，hover:opacity-75 这类变体需确认是否已启用 hover 变体（默认开启），但更常被忽略的是「层叠优先级」问题：如果元素本身有内联 style 或更高权重要求的 CSS 规则（比如 style="opacity: 1"），会覆盖 Tailwind 生成的 class。
- 检查浏览器开发者工具，看
opacity是否被划掉（被覆盖） - 避免在 JSX/HTML 中混用
style和class控制同一属性 - 若需动态控制，优先用
className切换类名，而非style.opacity - 注意
opacity会影响整个元素及其所有子元素（无法单独给子元素“取消透明”）
opacity 和 rgba() 的关键区别与误用场景
opacity 是作用于整个元素及其后代的全局透明度；而 rgba(0,0,0,0.5) 只影响当前颜色或背景色。很多人想让背景半透但文字不透明，却错误地用 opacity-50，结果文字也变淡了。
- 要背景半透+文字不透明 → 用
bg-black/50（Tailwind v3.0+ 新语法）或bg-[#00000080] - 要整个卡片渐隐 → 用
opacity-30 -
opacity会降低子元素所有颜色的 alpha，包括 border、shadow、svg fill 等 - 性能上，
opacity触发 GPU 合成层，频繁动画比rgba()开销略高（但日常使用无感）
自定义 opacity 值需要改配置文件
如果你真需要 opacity-15 或 opacity-85，不能靠插件或 class 拼接，必须修改 tailwind.config.js 的 theme.opacity 字段。Tailwind 不支持运行时生成任意 opacity 类。
示例配置：
module.exports = {
theme: {
extend: {
opacity: {
'15': '0.15',
'85': '0.85',
}
}
}
}
改完需重启 dev server，且新增类不会出现在 IDE 自动补全里（除非配好 intellisense 插件）。
真正难处理的不是加几个值，而是团队协作时没人记得这个自定义项，导致样式不一致或排查困难——建议优先用已有值，或改用 bg-black/15 这类更可控的替代方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
