配置 Tailwind 2 变体后出现 Gatsby "variantsValue is not iterable"错误？

Question

我正在将 Tailwind 2 与 Gatsby 一起使用。
我要申请类(class)odd:flex-row-reverse ，但 Tailwind docs say :

By default, the odd-child variant is not enabled for any core plugins.

所以我已经配置了“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`
    },
  },
  ...
}

您可以获得每个核心插件的默认变体的完整列表 here .