Cannot used custom colors for Prose

[CreateSean]

I've got custom colors in my theme extend that are working everywhere I use them.

However when overriding the color settings in the prose class (also within theme extend) the colors do not get applied unless I use one of the default tailwind colors.

On line 50 of my config file I'm setting the color like this:

      typography: (theme) => ({
        'xs': {
          css: {
            fontSize: '0.75rem',
          },
        },
        DEFAULT: {
          css: {
            color: theme('colors.textBrand'),
            maxWidth:'100%',

It won't accept my custom color of colors.textBrand however if I change that to one of the default tailwind colors like colors.red.500 it works fine.

How can I use my custom colors?

My 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'],
    }
  },
}

[CreateSean]

I figured it out. using the default name of theme('colors.textBrand') doesn't work. It must include DEFAULT in the name like this

theme('colors.textBrand.DEFAULT')