How can I make a responsive button using Tailwind CSS?

Question

    <button
      type="button"
      className="text-white bg-red-700 hover:bg-red-600 
      font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2 flex"
    >
      <HiUserRemove size={20} />
      <span className="ml-2">Delete account</span>
    </button>

I have a button using the code above and I'm using Tailwind CSS. I want it to be responsive and change when the screen is small, but I can't find any docs about this. Can you help me implement it?

Answer 1

You can check out the "Responsive Design" section of the docs:

https://tailwindcss.com/docs/responsive-design

By default, Tailwind uses a "mobile-first" approach. So classes without prefixes apply to the smallest screen size.

To use different classes for different screen sizes, just add the relevant class name "md", "lg", "xl" and so on, like so: xl:px-8, lg:px-5, md: px-2