Cannot use custom colors from extend key when customize

[CreateSean]

I've got the following in my extend key

      colors: {
        grayBrand: {
          light: '#D6D6D7',
          DEFAULT: '#647D97',
          dark: '#4d617a',
        },
        textBrand: {
          light:'#8c8c8c',
          DEFAULT:'#232323',
          link:'#607893',
        },
        yellowBrand: {
          DEFAULT: '#fbe21e',
        },
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.textBrand'),
            maxWidth:'100%',
            a: theme('colors.textBrand.link'),
          },
        },
      }),

In the typography > default > css key if I use a color added in the Extend key above it does not work

color: theme('colors.textBrand'),

but if I use one of the default colors it does work

color: theme('colors.green.500'),

How can I use my custom colors here?

---

and my full config in case it helps

module.exports = {
  purge: [
    './templates/**/*.html',
    './templates/**/*.twig',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    container: {
      center: true,
    },
    extend: {
      fontFamily: {
        'default':['Arial', 'Verdana', 'Helvetica', 'sans-serif'],
        'montserrat':['Montserrat', 'sans-serif'],
      },
      fontSize: {
      },
      screens: {
        //tailwind default is 1024, so we'll change lg to 980 to match original design
        lg: '980px',
      },
      colors: {
        grayBrand: {
          light: '#D6D6D7',
          DEFAULT: '#647D97',
          dark: '#4d617a',
        },
        textBrand: {
          light:'#8c8c8c',
          DEFAULT:'#232323',
          link:'#607893',
        },
        yellowBrand: {
          DEFAULT: '#fbe21e',
        },
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.textBrand'),
            maxWidth:'100%',
            a: theme('colors.textBrand.link'),
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
  variants: {
    extend: {
      textColor: ['visited'],
    }
  },
}