How to make SASS / SCSS to use the colors defined via FilamentColor::register()?

[cawecoy]

Package

Panel builder

Package Version

3.0.0

How can we help you?

app/Providers/AppServiceProvider.php:

use Filament\Support\Facades\FilamentColor;

public function boot(): void
{
    FilamentColor::register([
        'gray' => [
            50  => '247, 248, 250',
            100 => '235, 249, 240',
            // 200, 300, and so on
        ],
    ]);
}

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', 'resources/scss/app.scss'],
            refresh: true,
        }),
    ],
});

resources/scss/app.scss:

.my-custom-class {
    @apply bg-gray-50;
}

On my view:

<div class="my-custom-class">
    Some text content
</div>

The result after npm run build:

As you can see, the generated CSS does not use the 247 248 250 color that I set via FilamentColor::register(). It's actually using 249 250 251 which is the default Tailwind gray-50 color.

How to make the @apply bg-gray-50 in resources/scss/app.scss to use the 247 248 250 RGB color??

[cawecoy]

The solution was to add tailwind.config.js to the resources/scss/app.scss:

@config '../css/filament/admin/tailwind.config.js';