opacity-类失效常因误用：它使整个元素及子元素均变透明，看似无效实则副作用过强；正确做法是用bg-black/20等alpha语法或rgba()控制背景透明度，避免影响文字和子节点。
opacity- 类失效，通常不是类名写错了，而是它作用在了整个元素上——文字、子节点、边框全跟着变透明，视觉上容易误判为“没生效”。
为什么 opacity-30 看起来像没起作用
它确实生效了，但副作用太强：透明度 applied 到整个 DOM 节点，包括文字颜色、图标、伪元素甚至子容器。比如你给一个带文字的按钮加 opacity-30，结果按钮背景淡了，文字也淡得看不清，反而觉得“背景没透”。
- 检查 computed styles：打开开发者工具，看
opacity属性是否真被设成了0.3；如果不是，说明类根本没进 CSS 文件（见下一条） - 对比预期效果：如果你只想让背景半透而文字保持 100% 不透明，
opacity-就是错的工具 - 常见误用场景：蒙层遮罩、卡片悬浮态、禁用按钮视觉反馈——这些地方真正需要的是背景色透明度，不是整块元素透明度
bg-black/20 为什么比 bg-transparent + opacity-20 更可靠
bg-black/20 是 Tailwind v3.0+ 原生支持的 alpha 语法，等价于 background-color: rgba(0,0,0,0.2)，只影响背景色，不碰文字、边框或子元素。
-
bg-transparent只是清空背景，不带任何透明度值；它常被误当成“半透”，其实它是全透（transparent） -
opacity-20会把子元素也压暗，比如按钮里嵌了个 SVG 图标，图标也会变灰变淡 - 旧版 Tailwind（/ 语法，得用
bg-[#00000020]或启用experimental.opacity插件 - 注意：
bg-[#00000020]中的20是十六进制透明度（对应 0.125），不是百分比；33≈ 0.2，66≈ 0.4
动态拼接类名时 bg-black/20 容易失效
Tailwind 静态扫描无法解析字符串插值，bg-${color}/${alpha} 这种写法在构建时直接被忽略，最终 CSS 里根本没有这条规则。
- 错误写法：
className={`bg-${themeColor}/20`}→ 构建后无对应样式 - 安全做法：预定义组合，如
const bgClasses = { primary: 'bg-blue-500/10', danger: 'bg-red-500/10' } - 或用
safelist显式声明：safelist: ['bg-blue-500/10', 'bg-red-500/10', /bg-[a-z]+-500\/[0-9]+/]（正则必须用斜杠包裹） - 注意：safelist 是数组，写成字符串
'/bg-[a-z]+-500\/[0-9]+'会被当字面量处理，无效
深色模式下 bg-transparent 可能造成内容不可读
它不感知主题，强制切断背景继承链。父容器在 dark 模式下是 dark:bg-gray-800，你加了 bg-transparent，结果背景真成透明，底下浅色内容透上来，文字直接糊成一片。
立即学习“前端免费学习笔记（深入）”；
- 真正该做的是删掉背景定义，而不是用
bg-transparent覆盖——除非你明确需要穿透到 body 背景 - 深色模式友好写法：
bg-white dark:bg-gray-800或bg-slate-50 dark:bg-slate-900，让背景随主题切换 - 如果必须半透，优先用
bg-white/10 dark:bg-slate-900/20，而非bg-transparent+ 全局opacity-
