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

Consider this GraphQL query:

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

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?

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:

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: