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

Question

我正在将 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变体会导致错误？

Answer 1

原因是因为marginLeft不是核心插件。利润率的核心插件很简单margin。您应该将 Tailwind 配置编辑为如下所示：

// tailwind.config.js

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

您可以在此处获取每个核心插件的默认变体的完整列表。