斜杠语法仅适用于color、background-color、border-color等单值颜色属性，对shadow、gradient等非颜色属性无效；v3.0–v3.2不支持渐变色标透明度，需v3.3+或十六进制alpha；opacity-xx与bg-xxx/yy作用机制不同，前者影响整个元素及子元素，后者仅修改颜色alpha通道。
bg-xxx/yy 语法在非颜色属性上不生效
斜杠语法只作用于 color、background-color、border-color 这类明确接收单值颜色的 CSS 属性。写 shadow-lg/50 或 from-blue-500/30（v3.2 及更早）不会生成任何样式——Tailwind 解析器直接跳过，控制台也不报错。
常见误用场景：
-
shadow-md/30→ 无效，shadow不是颜色属性，得改boxShadow值里的 alpha -
bg-gradient-to-r from-blue-500/20 to-purple-500/20→ v3.0–v3.2 静默忽略，v3.3+ 才支持 -
text-red-500/0→ 虽然语法合法，但实际渲染为完全透明文字，可能被误判为“没效果”
opacity-xx 和 bg-xxx/yy 混用导致预期外行为
opacity-30 是给整个元素设 opacity: 0.3，子元素（文字、图标、边框）全跟着变淡；而 bg-black/30 只动背景色的 alpha 通道，其他内容完全不受影响。
典型踩坑：
立即学习“前端免费学习笔记（深入）”；
- 想让卡片背景半透，却加了
opacity-20→ 标题和按钮也变淡了，正确应选bg-white/20 - 想调边框透明度，写了
border-gray-300 opacity-50→ 整个元素变淡，正确写法是border-gray-300/50或border-gray-300 border-opacity-50 - 用了
bg-transparent后发现“还是有底色” → 很可能是父容器背景或边框遮挡，不是透明度问题
CSS 变量 + 斜杠语法需配置正确才能生效
Tailwind 对 CSS 变量的支持分两层：变量声明本身必须有效，且 tailwind.config.ts 中的颜色定义要匹配函数式语法格式。
关键配置点：
- 变量必须在
:root声明，不能塞进组件 class 或 scoped style 里 - 配置中要写成
primary: 'rgb(var(--color-primary) / <alpha>)' </alpha>，不是'rgba(var(--color-primary), <alpha>)'</alpha> - 若用 TypeScript，
withOpacity函数必须返回(opts) => string类型，否则构建报Type '() => string' is not assignable to type 'string | RecursiveKeyValuePair' - SCSS 中引用变量要用插值
--text-color: #{$color};，直接写--text-color: $color;会失效
动态颜色值无法通过 class 名实时生效
Tailwind 是编译时工具，bg-[#ff0000] 这种任意值类只有在构建时被源码扫描到才会生成对应 CSS 规则。运行时拼接的 bg-[${color}]，除非用 CDN 版本，否则基本无效。
安全做法：
- 提前把常用色值列进
safelist，如['bg-[#000000]', 'bg-[#ffffff20]'] - 真要用户输入动态色，别走 class 路线，直接操作
element.style.backgroundColor = colorValue - 避免在
@apply中嵌套var(--x)，Tailwind 不解析 CSS 变量运行时值
