使用Tailwind透明度类结合CSS变量遇RGB格式问题，求解决办法

你遇到的问题是因为Tailwind输出的rgb(59 130 246 / 20)是CSS原生的新RGB颜色语法，部分旧浏览器不支持这种空格分隔+百分比透明度的写法，导致透明度未生效。以下是几种可行的解决方式：

• 手动转换为传统RGBA格式
  拆分颜色值和透明度，用rgba()函数结合Tailwind的theme取值：

  :root {
      --theme-colour: rgba(theme('colors.blue.500'), 0.2);
  }
  

  编译后会生成兼容的rgba(59, 130, 246, 0.2)，能正常识别透明度。

• 使用Tailwind内置的透明度工具类
  若无需自定义CSS变量，直接在HTML元素上使用Tailwind的类语法即可，框架会自动处理兼容性：

  <div class="bg-blue-500/20"></div>
  

• 通过PostCSS插件自动兼容
  在项目中添加postcss-preset-env插件，它会自动将新的RGB语法转换为旧版浏览器支持的格式，不用手动修改代码。

内容的提问来源于stack exchange，提问作者Tyssen