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 将使用此语法。

如果禁用它，它将使用常规的十六进制颜色语法，因此您甚至不再需要postcss-color-rgbpost 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
    }
  }