TailwindCSS + NextJS：集成 PostCSS 和 IE11 支持（自定义属性）

Posted 2023-03-07

【中文标题】TailwindCSS + NextJS：集成 PostCSS 和 IE11 支持（自定义属性）

【英文标题】：TailwindCSS + NextJS: Integrating with PostCSS and IE11 support (custom properties)

【发布时间】：2020-07-06 15:43:14

【问题描述】：

根据文档，tailwind 声明为supports ie11。

...但它使用的是custom properties，即not supported by ie11。

我们正在尝试在带有以下postcss.config.js 的最小 nextjs 项目中使用它：

module.exports = 
  plugins: [
    'postcss-import',
    'tailwindcss',
    'autoprefixer',
    ['postcss-custom-properties',  preserve: false ]
  ]
;

我们要导入的唯一 css 文件：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

['postcss-custom-properties', preserve: false ] 行似乎没有做任何事情。两者都有默认值和那个。

显然，因为 ie 11 不支持自定义属性，所以像 transform 实用程序这样的东西会被完全忽略。

有人对此有什么建议吗？我花了太多时间试图让它发挥作用：|

【参考方案1】：

我仍在试验哪个是最佳值，但您的 postcss.config.js 中的 target 属性是负责任的，将其设置为 ie11 并且所有自定义 css 属性都将被删除。

target 属性没有记录，但我发现 this issue 解释了这种情况。如果您使用的是浏览器列表，请尝试使用

module.exports = 
  target: 'browserslist',