如何修改Tailwind的颜色输出格式以兼容旧版浏览器？

现有Tailwind配置如下：

module.exports = {
  theme: {
    extend: {
      colors: {
        black: '#000000'
      }
    }
  }
};

编译后生成的颜色工具类采用了新版RGB语法：

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

这种语法无法兼容2015年左右的旧版浏览器，需要改为生成传统rgba格式的CSS代码，示例如下：

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1));
}

只需在tailwind.config.js中添加colorFunction配置项，指定使用rgba格式即可：

module.exports = {
  theme: {
    extend: {
      colors: {
        black: '#000000'
      }
    }
  },
  colorFunction: 'rgba'
};

重新编译项目后，Tailwind就会生成符合要求的rgba格式颜色工具类，满足旧版浏览器的兼容需求。

内容的提问来源于stack exchange，提问作者moonstar-x