How to use the tailwindcss/defaultTheme.fontFamily function in tailwindcss

// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    container: {
      center: true,
      padding: '1rem',
    },
    extend: {
      colors: {
        primary: 'var(--primary)',
      },
      fontFamily: {
        sans: [...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    function({ addVariant, e }) {
      addVariant('disabled', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`disabled${separator}${className}`)}:disabled`;
        });
      });
    },
  ],
};

removeDeprecatedGapUtilities: true,
  },
  purge: [
    './config/*.php',
    './src/**/*.php',
    './resources/views/**/*.php',
    './resources/js/**/*.js',
    '../field-file/resources/views/**/*.php', // used for locally developing sibling packages
  ],
  theme: {
    extend: {
      colors: {
        current: 'currentColor',
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    backgroundColor: [
      'responsive',
      'hover',
      'group-hover',
      'focus',
      'active',
      'even',
      'odd',
      'dark',
      'dark-hover',
      'dark-group-hover',
      'dark-even',

70: '70',
        80: '80',
        90: '90',
        100: '100',
      },
      minHeight: {
        sm: '20rem',
      },
      maxHeight: {
        xs: '20rem',
        sm: '30rem',
        md: '40rem',
        '(screen-16)': 'calc(100vh - 4rem)',
      },
      fontFamily: {
        body: ["Poppins", ...defaultTheme.fontFamily.sans],
      },
      gradients: (theme) => ({
        'gradient-white': ['180deg', "rgba(255,255,255,1)", "rgba(246,249,252,1)"],
        'gradient-green': ['60deg', theme('colors.brand.primary'), "rgba(5,184,143,1)"],
      }),
    },
    customForms: (theme) => ({
      default: {
        'input, textarea, select, multiselect, checkbox, radio': {
          borderWidth: defaultTheme.borderWidth[2],
          '&:focus': {
            outline: 'none',
            boxShadow: 'none',
            borderColor: theme('colors.brand.primary'),
          },
        },

100: '100',
      },
      inset: {
        '-22': '-5.5rem',
      },
      minHeight: {
        sm: '20rem',
      },
      maxHeight: {
        xs: '20rem',
        sm: '30rem',
        md: '40rem',
        '(screen-16)': 'calc(100vh - 4rem)',
      },
      fontFamily: {
        body: ["Poppins", ...defaultTheme.fontFamily.sans],
      },
      gradients: (theme) => ({
        'gradient-green': ['60deg', theme('colors.brand.primary'), "rgba(5,184,143,1)"],
      }),
    },
    customForms: (theme) => ({
      default: {
        'input, textarea, select, multiselect, checkbox, radio': {
          borderWidth: defaultTheme.borderWidth[2],
          '&:focus': {
            outline: 'none',
            boxShadow: 'none',
            borderColor: theme('colors.brand.primary'),
          },
        },
      },

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Cerebri Sans', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        indigo: {
          '900': '#191e38',
          '800': '#2f365f',
          '600': '#5661b3',
          '500': '#6574cd',
          '400': '#7886d7',
          '300': '#b2b7ff',
          '100': '#e6e8ff',
        },
      },
      boxShadow: theme => ({
        outline: '0 0 0 2px ' + theme('colors.indigo.500'),
      }),
      fill: theme => theme('colors'),

theme: {
    extend: {
      colors: {
        green: {
          light: '#baebe1',
          primary: '#18bc9c',
          dark: '#15a589',
          darker: '#12826c',
        },
        red: {
          primary: '#e53e3e',
          dark: '#c53030',
        }
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [
    require('@tailwindcss/ui'),
  ],
};

'info': colors.blue,
            'success': colors.green,
            'warning': colors.yellow,
            'danger': colors.purple,
        },

        extend: {
            fontFamily: {
                sans: [
                    'Source Sans Pro',
                    ...defaultTheme.fontFamily.sans,
                ],

                serif: [
                    'Montserrat',
                    ...defaultTheme.fontFamily.serif,
                ],
            },

            spacing: {
                ...spacing,
            },

            width: {
                ...screens,
                ...spacing,
            },

            minWidth: {
                ...screens,
                ...spacing,
            },

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {},
    plugins: [
        require('@tailwindcss/custom-forms'),
        require('@tailwindcss/ui'),
    ],
}

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    theme: {
        container: {
            center: true,
            padding: '1rem'
        },
        extend: {
            colors: {
                transparent: 'transparent'
            },
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans]
            },
            lineHeight: {
                0: 0
            },
            minHeight: defaultTheme.spacing,
            opacity: {
                95: '.95'
            },
            spacing: {
                '2px': '2px'
            },
            zIndex: {
                99: 99,
                999: 999,
                1000: 1000,
                9999: 9999,

colors: {
                'scarlet': {
                    100: '#FFEAE9',
                    200: '#FFCBC7',
                    300: '#FFABA5',
                    400: '#FF6C62',
                    500: '#FF2D1F',
                    600: '#E6291C',
                    700: '#991B13',
                    800: '#73140E',
                    900: '#4D0E09',
                },
            },
            fontFamily: {
                sans: ['Mulish', ...defaultTheme.fontFamily.sans],
                hind: ['Hind', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {},
    plugins: [
        require('@tailwindcss/typography'),
        require('@tailwindcss/ui'),
    ],
}