Filament Tailwind CSS Class Not Found: How to Activate It

Has it ever happened to you that you added a new Tailwind CSS class to a Filament element, but it didn't work on the page after the refresh? Let me show you how to "activate" those classes.

Let's look at an example:

return $panel
    // ...
    ->renderHook(
        PanelsRenderHook::TOPBAR_END,
        function () {
            return view('socialMediaLinks');
        }
    );

And inside, we display a link:

resources/views/socialMediaLinks.blade.php

<div>
    <a href="https://x.com/DailyLaravel" class="text-blue-600">Twitter</a>
</div>

Now, as soon as we load the page, we can see that the text is not blue:

So, how can we apply the custom CSS classes here? Well, for that, we need to create a theme.

Creating New Theme

We must create a new theme for this tutorial since we will override some Filament design elements.

Let's start by running a console command:

php artisan make:filament-theme

This will create new theme scaffolding for us. But we still have to do two things:

First, we need to configure Vite by adding our theme as a source:

vite.config.js

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/admin/theme.css'
            ],
            refresh: true,
        }),
    ],
});

Then we have to register our new theme in a PanelProvider:

app/Providers/Filament/AdminPanelProvider.php

return $panel
    // ...
    ->viteTheme('resources/css/filament/admin/theme.css');

Once we have done that, we can run:

npm run build
# Or we can run
npm run dev

To either build production assets or watch for changes.

Styling our Element

Now that we have our custom theme, we have to keep one thing in mind:

Our class won't always work directly in the blade file, so it's best to style elements via css file. Just like this:

resources/views/socialMediaLinks.blade.php

<div>
    <a href="https://x.com/DailyLaravel" class="social-link">Twitter</a>
</div>

Now, in our CSS file, we can add our styles:

resources/css/filament/admin/theme.css

@import '/vendor/filament/filament/resources/css/theme.css';
 
@config 'tailwind.config.js';
 
.social-link {
    @apply text-blue-600
}

Now, if we compile our assets by running npm run build and open the page - we can see that the link has a blue color:

This principle applies to the majority of custom styling. Using it, we can avoid the issue of missing classes.