How to use the tailwindcss/defaultConfig.js.variants function in tailwindcss

},
      zIndex: {
        '-10': '-10', // Use .-z-10 not .z--10
        '-20': '-20',
      },
      lineHeight: {
        '12': '3rem', // 2 * 24px/1.5rem
      },
      letterSpacing: {
        'snug': '-0.0125em',
      },
    }
  },
  variants: {
    borderColor: [...defaults.variants.borderColor, 'focus-within'],
    margin: [...defaults.variants.margin, 'last'],
  },
  plugins: [],
  corePlugins: {
    // Disable preflight, as it actively removes parts of the browser stylesheet that existing code relies on,
    // e.g. increased font size & weight on h1, h2, etc. elements.
    // More info: https://tailwindcss.com/docs/preflight/#app
    preflight: false,
  }
}

'measure-5': '76ch',
      },
      zIndex: {
        '-10': '-10', // Use .-z-10 not .z--10
        '-20': '-20',
      },
      lineHeight: {
        '12': '3rem', // 2 * 24px/1.5rem
      },
      letterSpacing: {
        'snug': '-0.0125em',
      },
    }
  },
  variants: {
    borderColor: [...defaults.variants.borderColor, 'focus-within'],
    margin: [...defaults.variants.margin, 'last'],
  },
  plugins: [],
  corePlugins: {
    // Disable preflight, as it actively removes parts of the browser stylesheet that existing code relies on,
    // e.g. increased font size & weight on h1, h2, etc. elements.
    // More info: https://tailwindcss.com/docs/preflight/#app
    preflight: false,
  }
}