Next.js Tailwind レスポンシブが効かない

前提

Next.jsと、Tailwind.cssを用いてUIを作成しています
特定のdivタグにだけ、レスポンシブが当たらず困っているので、ぜひご教授いただけますと幸いです

実現したいこと

lg以上ではgridを3行,md以上では2行、スマホ版では1行にしたい

該当のソースコード

html

<div class="gap-4 mx-auto px-6 py-3 w-full max-w-[1200px] grid grid-cols-1 md:grid-col-2 lg:grid-col-3"> <div class="border rounded-2xl border-gray-200 bg-white overflow-hidden"></div> <div class="border rounded-2xl border-gray-200 bg-white overflow-hidden"></div> <div class="border rounded-2xl border-gray-200 bg-white overflow-hidden"></div></div>

試したこと

同一ページのheaderにもmd:やlg:を使用していますがこちらにはしっかりスタイルが当たっていることが確認できました。

html

<div className='bg-primary rounded-full px-5 py-4 m-3 md:px-7 md:py-5 lg:mx-7 lg:px-7 flex items-center shadow-header'></div>

最後に

お手数をおかけしますが、ぜひご教授よろしくお願い致します