我正在使用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 一起玩得很好？
uj5u.com熱心網友回復：
啟用后臺不透明度實用程式時，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
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439385.html