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

问题描述

我在 Gatsby 中使用 Tailwind 2。

我想应用 odd:flex-row-reverse 类，但是 Tailwind docs say：

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

所以我已经配置了“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 变体会导致错误？

解决方法

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

// tailwind.config.js

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

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