必须在tailwind.config.js的theme.extend.colors中定义primary: 'rgb(var(--primary) / )'，且CSS中--primary须为纯RGB三元组（如59 130 246），不可含alpha；JIT模式下需在模板中真实使用bg-primary/50等类才能生成。
tailwind.config.js 里怎么定义支持透明度的 CSS 变量颜色
必须用 rgb(var(--my-color) / 语法，且变量本身只存 RGB 三元组（不带 alpha）。Tailwind 不会解析 rgba() 或带 alpha 的 CSS 变量，只认这种斜杠分隔写法。
常见错误是把变量定义成 --primary: rgba(59, 130, 246, 0.8)，结果 bg-primary/50 完全无效——因为 Tailwind 解析时发现 var(--primary) 返回的是字符串 "rgba(59, 130, 246, 0.8)"，无法再拆出 RGB 通道做运算。
- ✅ 正确做法：CSS 中定义
--primary: 59 130 246（空格分隔，无括号无单位） - ✅ 配置中写
primary: 'rgb(var(--primary) /，注意末尾的)' /不能省 - ⚠️ 注意：
bg-primary/70
为什么 withOpacity 工具函数在 TypeScript 里容易报错
本质是类型系统和构建流程的错位：Tailwind 期望 theme.extend.colors 下每个值都是字符串或对象，但如果你写了 primary: withOpacity('--primary')，而 withOpacity 返回的是一个函数，就会触发 Type '() => string' is not assignable to type 'string'。
根本原因不是函数写错了，而是你把它放错了位置——它不能直接当颜色值用，只能用于生成静态色阶对象。
- ❌ 错误：把
withOpacity直接赋给colors.primary - ✅ 正确：用它批量生成
{ '50': ..., '100': ..., '900': ... }对象，再整个塞进colors.primary - ? 实操建议：如果只需要几个固定透明度（如 /20 /50 /80），不如直接在 CSS 变量里预设多组 RGB 值，比函数更稳定
bg-primary/50 不生效的三个高频原因
不是配置没保存，也不是浏览器缓存，大概率是 JIT 编译压根没生成这个类。Tailwind 3.0+ 默认只打包模板里真实出现过的 class，哪怕你配置得再完整，没在 HTML/JSX 中写过 bg-primary/50，它就不会存在。
- 检查
content字段是否覆盖到你写 class 的文件（比如漏了.tsx或.vue后缀） - 临时加一行测试：
，看是否立刻生效 - CSS 变量本身未在 :root 或组件作用域内声明，运行时
var(--primary)返回空字符串，最终计算成rgb(NaN NaN NaN / 0.5)，浏览器静默失败
自定义 RGB 变量颜色后，哪些工具类能自动支持
只有明确在 Tailwind 源码里被映射到 colors 配置的工具类才支持，比如 bg-、text-、border-、ring-、shadow-（带 / 语法时）。
但这些不会自动继承：fill-、stroke-、placeholder-、accent-。它们需要单独在 theme.extend 里显式配置，否则写 fill-primary/50 会无效。
- 要支持 SVG 填充，得加
extend: { fill: { primary: 'rgb(var(--primary) /)' } } - 要支持输入框占位符，得加
extend: { placeholderColor: { primary: 'rgb(var(--primary) /)' } } - 暗色模式下想切换变量值？别依赖
dark:前缀——它不作用于 CSS 变量计算，得靠:root和.dark :root分别定义--primary
真正卡住人的地方，往往不是怎么写配置，而是变量声明时机早于 Tailwind 的 CSS 加载顺序，或者 JIT 没扫描到你“以为用了”的 class。先让 bg-primary/100 在页面上真地渲染出来，再谈透明度渐变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
