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

Question

根据文档，tailwind 指出 supports ie11。

...但它使用 custom properties that are 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 实用程序之类的东西将被完全忽略。

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

Answer 1

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

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

module.exports = {
  target: 'browserslist',
}

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

TailwindCSS + NextJS: Integrating with PostCSS and IE11 support (custom properties)

custom-properties

autoprefixer

postcss

next.js

tailwind-css