How can I configure TailwindCSS using data queried from GraphQL in a Gatsby blog?

Consider this GraphQL query:

query {
   file(name: {eq: "theme"}) {
      colors {
         primary
         secondary
      }
   }   
}

How can I input primary and secondary from GraphQL in my tailwind.config.js file, so I can use eg. text-primary or bg-secondary as class names in my components?

//tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  theme: {
    extend: {
      colors: {
        primary: graphqlData.primary, // <--- GraphQL data goes here somehow
        secondary: graphqlData.secondary // <---- and here
      },
    },
  },
  variants: {},
  plugins: [],
}


Read more here: https://stackoverflow.com/questions/64890903/how-can-i-configure-tailwindcss-using-data-queried-from-graphql-in-a-gatsby-blog

Content Attribution

This content was originally published by Latze at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: