FilamentF
Filament•3y ago
Cow

`FilamentColor::register()` having no effect (icons are same color as text)

Hi guys. I'm trying to implement some Filament data tables in my Jetstream project. I followed the setup instructions for the Table Builder, including running php artisan filament:install --tables, and the various other steps for configuring Tailwind, PostCSS, etc.

I've set up a data table with a few TextColumns and a boolean IconColumn. The table is loading the correct data, but the icons in the IconColumn are appearing as white, just like the rest of my text.

I found a section in the docs regarding registering your desired colors with FilamentColor::register() in a service provider's boot() function. I've added the following to my AppServiceProvider::boot():

public function boot(): void
{
   // Configure colors for Filament
   FilamentColor::register([
      'danger'  => Color::Red,
      'gray'    => Color::Zinc,
      'info'    => Color::Blue,
      'primary' => Color::Indigo,
      'success' => Color::Green,
      'warning' => Color::Amber,
   ]);
}


However, this has no effect, and the icons are still being rendered as white, like the rest of my text.

I tried creating a middleware and moving it there, but it still had no effect. I've tried restarting the npm run dev command that is running, and also separately running npm run build. I also tried each of the suggested troubleshooting steps in this discord (clearing browser cache, etc).

In case it's relevant, I had initially experimented with adding a full panel to my project using the php artisan filament:install --panels command from the docs, but I have since decided to just use the components separately, so I disabled the panel by commenting out the App\Providers\Filament\AppPanelProvider::class line in my providers array in app.php. I mention this in case there's some lingering effect of creating and then disabling that panel that I'm unaware of.

Any ideas where else I can look? Thanks!
Solution
Aha, finally tracked it down. For future reference: The important lines that were missing in my tailwind.config.js were:

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

...

export default {
    presets: [preset],


I missed that line when applying the installation instructions to my existing project
Jump to solution
Was this page helpful?