tailwindcss：强制 tailwind 使用兼容的 RGB 语法？-解网

问：

我正在使用 tailwindcss 移植一个应用程序以与 IE11 一起使用。不幸的是，tailwindcss 坚持使用现代 W3C CSS 颜色模块 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 很好地配合的任何想法？

css 互联网浏览器 11 顺风 css

评论

0赞 first last 1/19/2022

文档明确指出它不支持 IE 11：tailwindcss.com/docs/browser-support。

0赞 Xudong Peng 1/19/2022

我同意@firstlast提到的。此外，IE也将在今年6月停止支持。使用Chrome或Microsoft Edge等现代浏览器将是更好的选择。

答：

7赞 KaeruCT 3/2/2022 #1

启用后台不透明度实用程序时，Tailwind 将使用此语法。

如果你禁用它，它将使用常规的十六进制语法来处理颜色，所以你甚至不再需要 post css 插件了！postcss-color-rgb

您可以通过将其添加到以下位置来禁用此功能：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
    }
  }

评论

0赞 Mehul Prajapati 10/16/2022

这只是一种解决方法，实际问题是如何将RGB格式转换为RGBA

上一个：AutoCompleteExtender 隐藏在 IE 中，但在 Edge 中工作

下一个：在IE中，此：not（：nth-child（）：nth-last-child（））声明不起作用