Issues with breakpoints in Tailwind

Alright this is a weird one. I've read through multiple other questions relating to this but nothing seems to work to fix it. Tailwind is working fine except for breakpoints.

I have this in the head

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

This is my tailwind.config (I even tried this with custom breakpoints added in here, still didn't work)

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./*.{html,js}"],
    theme: {
        extend: {
            colors: {
                "marine-blue": "hsl(213, 96%, 18%)",
                "purplish-blue": "hsl(243, 100%, 62%)",
                "pastel-blue": "hsl(228, 100%, 84%)",
                "light-blue": "hsl(206, 94%, 87%)",
                "strawberry-red": "hsl(354, 84%, 57%)",
                "cool-gray": "hsl(231, 11%, 63%)",
                "light-gray": "hsl(229, 24%, 87%)",
                "magnolia": "hsl(217, 100%, 97%)",
                "alabaster": "hsl(231, 100%, 99%)",
                "white": "hsl(0, 0%, 100%)",
            },
            fontFamily: {
                ubuntu: ["Ubuntu", "sans-serif"],
            },
        },
    },
    plugins: [],
};

This is the base code, it works fine

 <div class="container w-full relative z-10">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

Now I can add in a hidden class and that works as well, the div disappears like expected

 <div class="container w-full relative z-10 hidden">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

This is where it stops working

 <div class="container w-full relative z-10 sm:hidden">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

This also doesn't work (div stays hidden and never switches to block)

  <div class="container w-full relative z-10 hidden md:block">
                <img
                    src="assets/images/bg-sidebar-mobile.svg"
                    alt="sidebar image"
                    class="absolute w-full z-10 max-h-[180px]"
                />
            </div>

Doesn't matter how I resize the browser/responsive window in chrome inspector, I can add xs:block sm:hidden, etc. the breakpoint code just does not work. Adding in any of the breakpoint tags (xs, sm, md, lg, xl) is not being executed for some reason. I can drop the breakpoint tag and it works fine though.

I've closed and reopened VC Code, restarted the --watch function for tailwind, tried this in both Chrome and Firefox, breakpoints just aren't working.

Completely removing Tailwind and deleting all files and code relating to Tailwind and then reinstalling it fixed the issue. No idea what actually caused it. Before removing Tailwind, I made an entirely new index.html and css files and double checked all the links and code, Tailwind still didn't work correctly until fully removing and reinstalling it.