Tailwind styling not applying on blade file

<div class="space-y-4">
    {{-- Summary Card --}}
    <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
                <p class="text-xs font-medium text-gray-500 dark:text-gray-400">Total Orders</p>
                <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $orders->count() }}</p>
            </div>
........

 Action::make('view_orders')
                    ->label('View Orders')
                    ->icon('heroicon-o-shopping-bag')
                    ->color('info')
                    ->modalHeading(fn ($record) => "Orders for Delivery {$record->delivery_number}")
                    ->modalDescription(fn ($record) => $record->prescription
                        ? "Prescription: {$record->prescription->prescription_number} | {$record->orders->count()} order(s)"
                        : 'No prescription linked')
                    ->modalContent(function ($record) {
                        $orders = $record->orders()->with(['supplier', 'items.medicine'])->get();

                        return new HtmlString(
                            view('filament.components.delivery-orders', [
                                'delivery' => $record,
                                'orders' => $orders,
                            ])->render()
                        );
                    })
                    ->modalSubmitAction(false)
                    ->modalCancelActionLabel('Close')
                    ->slideOver()
                    ->modalWidth('7xl'),