tailwindcss：强制 tailwind 使用兼容的 rgb 语法？

Question

我正在移植一个使用 tailwindcss 的应用程序以与 IE11 一起使用。不幸的是，tailwindcss 坚持使用现代 W3C CSS Color Module Level 4 rgb() 语法生成颜色，这在 IE 中似乎不起作用，例如它会像这样生成类：

.bg-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-bg-opacity));
}

我曾尝试在我的 postcss 管道中使用 postcss-color-rgb 将其转换回通常的语法但无济于事：

postcss([
    require('tailwindcss')(twConfig),
    require('postcss-color-rgb'),
    require('autoprefixer'),
]).process(cssContent, {
    from: css,
    to: `build/${name}.css.tmp`
})

Tailwind 声称与任何现代浏览器兼容，有些人可能敢将 IE11 归类为。关于让顺风在这里与 IE11 很好地配合使用有什么想法吗？

Answer 1

Tailwind 将在启用 background opacity utilities 时使用此语法。

如果您禁用它，它将使用常规的十六进制语法来表示颜色，因此您甚至不再需要 postcss-color-rgb post css 插件！

您可以通过将此添加到您的 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
    }
  }

tailwindcss：强制 tailwind 使用兼容的 rgb 语法？

tailwindcss: Force tailwind to use compatible rgb syntax?

css

internet-explorer

internet-explorer-11

tailwind-css