配置 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。

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

Gatsby "variantsValue is not iterable" error after configuring Tailwind 2 variants?

gatsby

tailwind-css