Tailwindcss 4.1 margin and padding don't work at all

I'm having an issue with Tailwind CSS. I'm following Fireship's "Discord-Inspired Animated Navbar" tutorial. Everything is going great, but when I try to apply margin or padding using Tailwind classes, it doesn't work. However, when I use inline style, it works. Can someone help me figure out why the Tailwind classes aren't working?

    <button className="group transition-all duration-200 ease-linear relative flex items-center justify-center h-12 w-12 mx-auto shadow-lg rounded-3xl bg-gray-800 hover:rounded-xl hover:bg-green-600 hover:text-white" style={{ marginTop: "8px", marginBottom: "8px", marginInline: "auto" }}>
      <IoMdSettings size={28} />
      <span style={{ padding: "8px", margin: "8px", fontSize: "12px" }} className='group-hover:scale-100 absolute w-auto min-w-max left-14 text-white rounded-md shadow-md bg-gray-900 text-xs font-bold transition-all duration-100 scale-0 origin-left'>Tooltip 💡</span>
    </button>