So here's the issue. I've gone through various other queries related to this problem but haven't found a solution yet. Tailwind seems to be functioning well except for breakpoints.
This is what I have in the head
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And here's my tailwind.config (even tried adding custom breakpoints, still no luck)
/** @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: [],
};
The base code 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>
Adding a hidden class also works as 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>
But when trying to use breakpoints like sm:hidden, it doesn't work
<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>
The breakpoint tags just don't seem to execute properly
<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>
Regardless of how I resize the browser or use Chrome inspector, the xs, sm, md, lg, xl breakpoints simply do not work. Removing the breakpoints works fine though.
I've tried closing and reopening VS Code, restarting the --watch command for Tailwind, tested in both Chrome and Firefox, but the breakpoints continue to malfunction.