Gatsby: Tailwind + Scss throw warn "Multiple node fields"

[yudyananda]

Hi, i'm using gatsby starter defaullt and follow this documentation to make tailwind and scss run well. Everything is working except warning in my console complaining about multiple node fields.

By the way here is the warning detail when i run gatsby develop

warn Multiple node fields resolve to the same GraphQL field `SitePlugin.pluginOptions.postCssPlugins.theme.rotate._45` - [`45`, `-45`]. Gatsby will use `-45`.
warn Multiple node fields resolve to the same GraphQL field `SitePlugin.pluginOptions.postCssPlugins.theme.rotate._90` - [`90`, `-90`]. Gatsby will use `-90`.
warn Multiple node fields resolve to the same GraphQL field `SitePlugin.pluginOptions.postCssPlugins.theme.rotate._180` - [`180`, `-180`]. Gatsby will use `-180`.
warn Multiple node fields resolve to the same GraphQL field `SitePlugin.pluginOptions.postCssPlugins.theme.skew._3` - [`3`, `-3`]. Gatsby will use `-3`.
warn Multiple node fields resolve to the same GraphQL field `SitePlugin.pluginOptions.postCssPlugins.theme.skew._6` - [`6`, `-6`]. Gatsby will use `-6`.
warn Multiple node fields resolve to the same GraphQL field `SitePlugin.pluginOptions.postCssPlugins.theme.skew._12` - [`12`, `-12`]. Gatsby will use `-12`.

The warning above is refering to my tailwind config

// tailwind.config.js

module.exports = {
    ....
    theme: {
          ....
          rotate: {
          '-180': '-180deg',
           '-90': '-90deg',
           '-45': '-45deg',
           '0': '0',
           '45': '45deg',
           '90': '90deg',
           '180': '180deg',
          },
          skew: {
            '-12': '-12deg',
            '-6': '-6deg',
            '-3': '-3deg',
            '0': '0',
            '3': '3deg',
            '6': '6deg',
            '12': '12deg',
        },
    }
}

// gatsby-config.js
module.exports = {

  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        postCssPlugins: [
          require("tailwindcss"),
          require("./tailwind.config.js"),
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `assets`,
        path: `${__dirname}/src/assets`, // CSS assets
      },
    },
    {
      resolve: `gatsby-plugin-react-svg`,
      options: {
        rule: {
          include: /assets/
        }
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/assets/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
  ],
}

Should care about this warning or simply just ignore it?

[LekoArts]

Thank you for opening this!

Generally speaking you can ignore this warning as it refers to the GraphQL schema of SitePlugin. You shouldn't need to put the config file in there, if you place a file with the default name tailwind.config.js at the root it should pick it up automatically.

That's what the note is saying:

Optionally you can add a corresponding configuration file (by default it will be tailwind.config.js). If you are adding a custom configuration, you will need to load it after tailwindcss.

So give it a try by removing the entry from the plugin option and it should still work. If not, you can ignore the warning :)

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[yudyananda]

Just want to confirm the warning is gone after remove tailwind config from the plugin option. Thanks