tailwind-css - 让顺风支持 rgba() 而不是 rgb(/var(--tw-text-opacity))

Question

我的 iOS 设备较旧，因此在 Safari 中无法显示某些颜色。我不知道为什么，但我猜这是由于 tailwind 如何设置 text-color 或 background-color 以使用 rgb 但带有 /opacity-value例如:

使用 class="text-blue-600" 创建要应用的 CSS:

.text-blue-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(37 99 235/var(--tw-text-opacity)) !important;
}

或者执行 class="bg-gray-200" 会导致应用此 CSS:

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235/var(--tw-bg-opacity));
}

我想测试这是否会破坏 iOS 10 上旧 Safari 上的 CSS。有没有办法告诉 tailwind 使用我认为应该支持的 rgba。

Answer 1

你可以使用 postcss 和 postcss-preset-env 插件，它会默认将 rgb 转换为 rgba