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

borderColor: defaultTheme.borderColor.default,
      borderWidth: defaultTheme.borderWidth.default,
      borderRadius: defaultTheme.borderRadius.default,
      backgroundColor: defaultTheme.colors.white,
      focusBorderColor: defaultTheme.colors.blue[400],
      focusBoxShadow: defaultTheme.boxShadow.outline,
      boxShadow: defaultTheme.boxShadow.none,
      checkboxSize: '1em',
      radioSize: '1em',
      checkboxIcon: `<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"></path></svg>`,
      radioIcon: `<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16"><circle r="3" cy="8" cx="8"></circle></svg>`,
      checkedColor: defaultTheme.colors.blue[500],
      selectIcon: `<svg fill="${
        defaultTheme.colors.gray[500]
      }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"></path></svg>`,
      selectIconOffset: defaultTheme.spacing[2],
      selectIconSize: '1.5em',
    },
    spinner: theme =&gt; ({
      default: {
        color: '#dae1e7', // color you want to make the spinner
        size: '1em', // size of the spinner (used for both width and height)
        border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)
        speed: '500ms', // the speed at which the spinner should rotate
      },
      sm: {
        color: '#dae1e7',
        size: '2.5em',
        border: '2px',
        speed: '500ms',
      },
      md: {

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,
                99999: 99999,
                999999: 999999
            }
        }
    },

'10/12': '83.333333%',
      '11/12': '91.666667%',
      full: '100%',
      screen: '100vw',
    }),
    zIndex: {
      auto: 'auto',
      '0': '0',
      '10': '10',
      '20': '20',
      '30': '30',
      '40': '40',
      '50': '50',
    },
    customForms: {
      horizontalPadding: defaultTheme.spacing[3],
      verticalPadding: defaultTheme.spacing[2],
      lineHeight: defaultTheme.lineHeight.normal,
      fontSize: defaultTheme.fontSize.base,
      borderColor: defaultTheme.borderColor.default,
      borderWidth: defaultTheme.borderWidth.default,
      borderRadius: defaultTheme.borderRadius.default,
      backgroundColor: defaultTheme.colors.white,
      focusBorderColor: defaultTheme.colors.blue[400],
      focusBoxShadow: defaultTheme.boxShadow.outline,
      boxShadow: defaultTheme.boxShadow.none,
      checkboxSize: '1em',
      radioSize: '1em',
      checkboxIcon: `<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"></path></svg>`,
      radioIcon: `<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16"><circle r="3" cy="8" cx="8"></circle></svg>`,
      checkedColor: defaultTheme.colors.blue[500],
      selectIcon: `