The custom dynamic plugins that i typed in tailwind isn’t working can someone tell me why?

const plugin = require('tailwindcss/plugin')

module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {
      fontFamily:{
        nerko: "Nerko One"
      },
      keyframes:{ 
        'bouncer':{
          '0%,100%':{transform: 'translateY(0)'},
          '50%':{transform: 'translateY(-50px)'}
        }
      },
      animation:{
        'bounce-50': 'bouncer 1s ease-in-out'
      },
    },
  },
  plugins: [
    plugin(function({matchComponents, theme}){
      matchComponents(
        {
          circle:(value)=>({
            width:value,
            height:value,
            borderRadius:theme('borderRadius.full')
          })
        },
        {
          value:theme('spacing')
        }
      )
    }),
    plugin(function({matchComponents, theme}){
      matchComponents(
        {
            gradientShadow:(color) => ({
                boxShadow:`0 180px 700px -20px ${color}, 0 -180px 700px -20px ${color}, 180px 0 700px -20px ${color}, -180px 0 700px -20px ${color}`
            })
        },
        {
            color:theme('colors')
        },
      )
    })
  ],
}

Give above is the piece of code of my config.js file from tailwind where i tried to implement custom dynamic plugins but after that also non of the classes are shown in the html can someone please help me i have already set the input and output file and run it so that is not the issue so please help me

i tried rewriting the code and i tried different plugins but non of them show up so yea