Tailwind CSS classes not working in Filament (Laravel)

By following the official documentation I have created an Laravel application with TALL stack and then installed Filament.

Everything is working fine but I am facing issue with Tailwind Classes.

In Filament Infolist, I am trying to add some tailwind css classes and a custom css classes defined in resources\css\app.css as given below:

                            Infolists\Components\TextEntry::make('title')
                                ->hiddenLabel()
                                ->formatStateUsing(fn(string $state): HtmlString => new HtmlString("<h1 class='text-3xl font-bold text-gray-800'>" . $state . "</h1>")),

                            Infolists\Components\TextEntry::make('body')
                                ->hiddenLabel()
                                ->formatStateUsing(fn(string $state): HtmlString => new HtmlString("<div class='notice-body'>" . $state . "</div>"))
                                ->columnSpanFull()

What I have found that it is not working because filament doesn't uses default layout file resources\views\components\layouts\app.blade.php which has @vite('resources/css/app.css').

But now, how to use these tailwind css classes and custom css classes in Filament components? I'm unable to find it's solution in documentation or I missed out something?

For reference below is tailwind.config.js:

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

postcss.config.js

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

To make it work, I registered existing resources/css/app.css as filament theme using this ->viteTheme('resources/css/app.css') in admin panel provider.

Credit: Povilas Korop | Link to Video