please delete

[CreateSean]

I've extended my colors using the theme extend key and colors are working perfectly in all cases except when I try to update the typography plugin settings

starting at line 26 I have my colors followed by typography settings

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

in default > css > color it is set to my costum color color: theme('colors.textBrand'), however this does not work. If I change it to use a default tailwind color like this color: theme('colors.red-500'), it does work.

How can I use my custom colors here?

full config file

const { autoload } = require('laravel-mix');

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: {
          lighter:'#eaeaea',
          light: '#D6D6D7',
          DEFAULT: '#647D97',
          dark: '#4d617a',
        },
        textBrand: {
          light:'#8c8c8c',
          DEFAULT:'#232323',
          link:'#607893',
        },
        yellowBrand: {
          DEFAULT: '#fbe21e',
        },
      },
      typography: (theme) => ({
        'xs': {
          css: {
            fontSize: '0.75rem',
          },
        },
        DEFAULT: {
          css: {
            color: theme('colors.textBrand'),
            maxWidth:'100%',
            a: {
              color:theme('colors.textBrand.link'),
            },
            ul: {
              overflow:'auto',
            },
            'ul li': {
              'border-bottom':'1px dashed #d5d5d5',
              'padding-top': '5px',
              'padding-bottom': '5px',
            },
            'thead': {
              color:'#fff',
              backgroundColor: '#607893',
              fontWeight: '600',
              borderBottomWidth: '1px',
              borderBottomColor: '#4d617a',
            },
            'thead th': {
              verticalAlign: 'bottom',
            },
            'table td, thead th': {
              padding: '10px 18px',

            },
            'table td': {
              border:'1px solid #D6D6D7',
            },
            'table th': {
              border:'1px solid #4d617a',
            },
            'table td:first-child, thead th:first-child': {
              padding: '10px 18px',
            },
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // require("@tailwindcss/forms")({
    //   strategy: 'class',
    // }),
  ],
  variants: {
    extend: {
      textColor: ['visited'],
    }
  },
}