I am working with FilamentPHP and attempting to use a custom widget with Tailwind CSS. I have the following Livewire component:

namespace AppLivewireWidgetsUsers;

use FilamentWidgetsWidget;
use IlluminateContractsViewView;

class TotalUserWidget extends Widget
{
    protected static string $view = 'livewire.widgets.users.total-user-widget';
}

The corresponding view is as follows:

<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-lg shadow-lg p-8">
    <h1 class="text-4xl font-bold text-white mb-4">
        Tailwind CSS
    </h1>
    <p class="text-lg text-primary-500 mb-8">
        A utility-first CSS framework for rapidly building custom designs.
    </p>
    <a href="#" class="bg-white text-primary-500 font-bold py-2 px-4 rounded">
        Get started
    </a>
</div>

I placed this component in the Filament admin panel using the following code:

->widgets([
    TotalUserWidget::class,
])

Unfortunately, when I run the code, the styles do not render as expected. However, when I run the code outside of the admin panel, everything works correctly.

what I get is :

what I want is :

Could you please help me understand why the styles are not being applied correctly within the Filament admin panel and how I might resolve this issue?