如何将Tailwind CSS v3+的RGB格式转为兼容Safari 11的RGBA格式？

方案1：使用PostCSS插件在编译阶段转换格式 #

因为Tailwind基于PostCSS运行，你可以编写轻量的PostCSS插件，在CSS生成时自动将空格分隔的rgb(a b c / o)格式转换为Safari 11支持的rgba(a,b,c,o)格式，无需后续正则替换。

实现步骤： #

• 在项目根目录创建postcss-rgb-fix.js文件，内容如下：

module.exports = () => ({
  postcssPlugin: 'postcss-rgb-fix',
  Declaration(decl) {
    // 匹配带透明度的空格分隔rgb/rgba格式（含变量）
    decl.value = decl.value.replace(
      /rgba?\(\s*(\d+)\s+(\d+)\s+(\d+)\s+\/\s*([^)]+)\)/g,
      (match, r, g, b, alpha) => `rgba(${r},${g},${b},${alpha})`
    );
    // 处理不带透明度的空格分隔rgb格式
    decl.value = decl.value.replace(
      /rgb\(\s*(\d+)\s+(\d+)\s+(\d+)\)/g,
      (match, r, g, b) => `rgb(${r},${g},${b})`
    );
  }
});

• 在postcss.config.js中引入该插件，确保放在Tailwind插件之后：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('./postcss-rgb-fix.js')
  ]
};

编译后的CSS会直接生成兼容格式，CI/CD流程可正常运行。

方案2：禁用Tailwind的opacity变量生成（适合未使用透明度类的场景） #

既然你没有使用background-opacity这类透明度控制类，可直接配置Tailwind生成不带opacity变量的纯RGB值，从根源避免问题：

配置步骤： #

• 修改tailwind.config.js，自定义所有用到的颜色，去掉默认的opacity变量绑定：

module.exports = {
  theme: {
    extend: {
      colors: {
        // 示例：替换为你实际使用的颜色，直接写逗号分隔的rgb/rgba值
        gray: {
          300: 'rgb(163, 160, 158)',
          // 其他颜色同理
        }
        // 其他颜色组...
      }
    },
    // 禁用默认的opacity相关工具类（可选，因你未使用）
    corePlugins: {
      backgroundOpacity: false,
      textOpacity: false,
      borderOpacity: false,
      divideOpacity: false,
      ringOpacity: false,
      placeholderOpacity: false
    }
  }
};

这样Tailwind会直接输出逗号分隔的RGB格式，完全符合Safari 11的要求。

方案3：使用Tailwind的@layer自定义兼容类（适合局部调整） #

若仅需处理部分颜色，可在CSS中用@layer定义兼容的颜色类，覆盖Tailwind的默认输出：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-gray-300 {
    background-color: rgb(163, 160, 158);
  }
  // 其他需要兼容的类同理
}

这种方法适合颜色使用较少的场景，简单直接。

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