Tailwind css responsiveness not working in angular 18

I am using Angular 18 with tailwind CSS. For mobile view, I want both the columns to have full width but it is not working. Any help is appreciated.

<div class="grid grid-cols-5 gap-4 mt-5 min-h-[calc(100vh-190px)]" *ngIf="isReady">
<div class="col-span-2 !sm:col-span-5 panel p-0 bg-yellow-50 border border-yellow-300">
// customer details goes here
</div>
<div class="panel col-span-3 !sm:col-span-5 p-1">
<app-interaction-history [interactionHistory]="interactionHistory"
[selectedCustomer]="selectedCustomerDetails"></app-interaction-history>
</div>
</div>


I tried using flex but to no avail. I also tried adding sm:grid-cols-1 to the main grid but still does not work

Continue reading...