让顺风支持 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

启用 background opacity utilities 后，Tailwind 将使用此语法。

您可以通过将此添加到您的 tailwind.config.js:

来禁用它

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...

     backgroundOpacity: false,
    }
  }

就我而言，我在文本和边框颜色方面遇到了类似的问题。您可能需要试验并找出这些“不透明度”实用程序中的哪些给您带来了麻烦。对于我的项目，我禁用了所有这些：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
        backdropOpacity: false,
        backgroundOpacity: false,
        borderOpacity: false,
        divideOpacity: false,
        ringOpacity: false,
        textOpacity: false
    }
  }

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

Make tailwind favor rgba() instead of rgb(/var(--tw-text-opacity))

tailwind-css