我正在将 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
变体导致错误?
最佳答案
原因是因为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"错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65497300/