配置Tailwind2变体后Gatsby出现“variantsValue不可迭代”错误？

我正在将 Tailwind 2 与 Gatsby 一起使用。

我想应用该类odd:flex-row-reverse，但Tailwind 文档说：

默认情况下，没有为任何核心插件启用奇子变体。

所以我已经配置了“odd-child”变体来使用marginLeft：

// tailwind.config.js

module.exports = {
  variants: {
    extend: {
      flexDirection: ['odd'],
      marginLeft: ['odd'],  // This line causes the error
    },
  },
  ...
}

但出于某种原因，我在使用时在控制台中收到以下错误gatsby develop：

error Generating development JavaScript bundle failed

variantsValue is not iterable
failed Re-building development bundle - 0.232s

如果我删除该marginLeft行，一切运行正常。

为什么marginLeft变体会导致错误？

回答

// tailwind.config.js

module.exports = {
  variants: {
    extend: {
      flexDirection: ['odd'],
      margin: ['odd'],  // `margin` instead of `marginLeft`
    },
  },
  ...
}