Custom tailwind

I need to use something like

<span class="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">Default</span>

<span class="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">Default</span>

But the style is not applied. I read this https://filamentphp.com/docs/2.x/notifications/installation#configuring-styles but I didn't solve the problem. How can I do it?

Filament

Elegant TALL stack notifications for Laravel artisans.

7 Replies

You were reading "Notification" installation instructions. But you need the theme instructions for the admin panel: https://filamentphp.com/docs/2.x/admin/appearance#building-themes

Filament

The elegant TALL stack admin panel for Laravel artisans.

And with this changes should I be able add what tailwind component I want ?

Yes.

Ok. Thank you🙏🏻

My page is looking like this after I put this

   Filament::serving(function () {
            // Using Vite
            Filament::registerViteTheme('resources/css/filament.css');
        });

   Filament::serving(function () {
            // Using Vite
            Filament::registerViteTheme('resources/css/filament.css');
        });

in the boot method

Did you follow all the steps correctly? And ran npm run build or are running npm run dev?

It was a noob problem 🤦🏼‍♀️. I forgot to add postcss.config