Responsive design not working on Tailwind Grid

[srleom]

Tailwind is not working when I try to use different grid layouts depending on screen size. At screen size xs, it resizes to grid-cols-2 but does not resize to grid-cols-3 at screen size md.

When inspecting, it seems the grid-cols-3 property is deleted.

Below is my code. I am using the latest version of TailwindCSS v3.3.5. Appreciate any help on this, thank you!

<div class="flex flex-grow flex-col">
	<header class="md:w-2/3">
		<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">Projects I've worked on</h1>
		<p class="mt-4 md:w-5/6">
			A gallery of projects I've built. Some of them are open-source, so if you see something that
			piques your interest, check out the code and let me know how it can be improved.
		</p>
	</header>
	<div class="mt-16 grid grid-cols-1 gap-x-12 gap-y-16 md:grid-cols-3 xs:grid-cols-2">
		<div class="">
			<Project
				img="/toDo.png"
				title="toDo"
				description="A simple toDo app with authentication functionality. Built with SvelteKit, TailwindCSS and Supabase."
				href="https://www.sveltetodo.xyz"
			/>
		</div>
		<div class=""><Project /></div>
		<div class=""><Project /></div>
		<div class=""><Project /></div>
	</div>
</div>

[srleom]

It seems it has something to do with my use of a custom screen size xm, which I added to Tailwind by extending in tailwind.config.js. When using standard screen sizes, it works as designed.

[Zehad-10]

tailwind css uses min-width for media query. I don't think your grid-cols-3 property is deleted. you can see this grid-cols-3 after 768px viewport width

[d0nda]

would be great if you had a reproduction to test whats really wrong