配置 Tailwind 2 变体后 Gatsby “variantsValue is not iterable”错误？

Posted 2023-03-06

【中文标题】配置 Tailwind 2 变体后 Gatsby “variantsValue is not iterable”错误？

【英文标题】：Gatsby "variantsValue is not iterable" error after configuring Tailwind 2 variants?

【发布时间】：2021-04-06 09:17:18

【问题描述】：

我将 Tailwind 2 与 Gatsby 一起使用。

我想申请班级odd:flex-row-reverse，但是Tailwind docs say：

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

所以我已将“奇子”变体配置为与 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 变体会导致错误？

【参考方案1】：

原因是marginLeft 不是核心插件。边距的核心插件就是margin。您应该将 Tailwind 配置编辑为如下所示：

// tailwind.config.js

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

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