How to use padding negative in tailwind to make it responsive?

You cannot use padding as negative value in tailwind. Try margin as

-m-4

-m-16

and u can refer tailwindcss.com for more reference

Inside tailwind.config.js file, you can extend Tailwind with your own custom utility classes where you can easily add a custom class something like

neg-m-16:{margin:-1rem}

and use it in your component. For more you can refer to [https://tailwindcss.com/docs/adding-new-utilities][1]