Tailwind 类 space-x 或 space-y 在 IE 11 中不起作用

Question

我在我的一个项目中使用 tailwind 1.4.6 版，发现使用类 space-x 和 space-y 在 IE 11 中不起作用。

我已通读文档，发现安装 postcss-custom-properties 以帮助支持 IE 11 的一些功能。我已经完成了这项工作，并将其包含在我的插件中（下面是什么的 sn-p导入的插件）

这里提到的 Tailwind 是为了支持 IE https://v1.tailwindcss.com/docs/using-with-preprocessors#variables

plugins: [
    require("@tailwindcss/custom-forms"),
    require('postcss-nested'),
    require('postcss-custom-properties'),
]

关于为什么这不起作用，我有什么遗漏吗？

Answer 1

您需要在tailwind 配置文件中将目标显式设置为ie11。默认目标是relaxed。有选择地将ie11 定位为空间插件似乎是个好主意，并在此PR 上读取 cmets。

将此添加到您的tailwind.config.js：

{
  target: [
    'relaxed',
    {
      space: 'ie11'
    }
  ]
}

空间实用插件在设置默认relaxed目标时使用本地css变量，IE11和postcss-custom-properties不支持（仅适用于:root选择器中定义的css变量）：

当定位ie11 时，此局部变量实现将被替换。因此，请记住 space-x-reverse 和 space-y-reverse 实用程序将不起作用。