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

user_8886761 0
Viewed 3303

I'm using Tailwind 2 with Gatsby.

I want to apply the class odd:flex-row-reverse, but the Tailwind docs say:

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

So I've configured the "odd-child" variant to work with marginLeft:

// tailwind.config.js

module.exports = {
  variants: {
    extend: {
      flexDirection: ['odd'],
      marginLeft: ['odd'],  // This line causes the error
    },
  },
  ...
}

But for some reason, I'm getting the following errors in the console while using gatsby develop:

error Generating development JavaScript bundle failed

variantsValue is not iterable
failed Re-building development bundle - 0.232s

Everything runs fine if I remove the marginLeft line.

Why does the marginLeft variant cause errors?

tailwind-css gatsby
1 Answers

The reason is because marginLeft isn't a core plugin. The core plugin for margins is simply margin. You should edit your Tailwind config to look like this:

// tailwind.config.js

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

You can get a full list of the default variants for each of the core plugins here.

user_88867610
Related