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

Question

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

我已通读文档并发现安装 postcss-custom-properties 以帮助支持 IE 11 的某些功能。我已经这样做并将其包含在我的插件中(下面是插件的片段是进口的)

此处提到的 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

您需要在顺风配置文件中将目标明确设置为 ie11。默认目标是 relaxed。为空间插件选择性地定位 ie11 似乎是个好主意，阅读关于这个 PR 的评论.

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

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

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

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