在顺风CSS中替换现代rgba()符号以支持旧浏览器

当代版本的Tailwind CSS v3+将颜色构建为rgb空格-斜杠颜色符号，这是我的web应用程序现在需要支持的旧浏览器(Safari 11)不支持的。

。rgb(163 160 158 / var(--tw-bg-opacity)

问题是空格分隔符和/ opacity语法。

我在顺风CSS文档re: config或options中找不到任何关于此的内容。我以前通过添加一个正则表达式perl操作来取代这些并构建。

npm run build && perl -pi -w -e 's/rgba?\(\s*\d+)(\s*\s*\d+)(\s*\s*\d+) \//rgba($1,$2,$3,/g)' dist/assets/index.*.css

CI/CD部署不喜欢这样，我觉得这不是处理这个问题的正确方法。

有人知道更好的方法吗?有什么更优雅的方式来代替它们呢?

我没有使用背景不透明度，如果这使事情更容易。

提前感谢。

如果你不需要使用background-opacity，你可以通过在你的tailwind.config.js中添加这个选项来禁用它:

module.exports = {
corePlugins: {
backgroundOpacity: false,
},
}

我在Tailwind v2中找到了源代码，它没有出现在当前版本中，但仍然可以运行(Tailwind v3): docs.

例如，对于bg-red-400实用程序:

<div class="bg-red-400">Background</div>

生成的类将是:

.bg-red-400 {
background-color: #f87171;
}

代替:

background-color: rgb(248 113 113 / var(--tw-bg-opacity));

Tailwind-play

相关内容