Custom colors
Hi,
I'm struggling to figure out how to add new colors to Tailwind.
I've created a custom theme as shown on the documentation (https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme).
My tailwind.config.js file for Filament :
I have created a custom page with this HTML to test it :
This file is located under resources/views/filament/pages/settings.blade.php and according to my tailwind config, my should should be compiled.
But, the text shown is black (default color) and not red as expected.
When I use a standard color in the custom page (for example text-success-500), it works fine.
I've looked for answers in the documentation and found this : https://filamentphp.com/docs/3.x/support/colors but I wasn't able to make it work. Here are the steps I followed :
1.
2. In the
I'm struggling to figure out how to add new colors to Tailwind.
I've created a custom theme as shown on the documentation (https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme).
My tailwind.config.js file for Filament :
export default {
...
content: [
'./app/Filament/**/*.php',
'./resources/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
],
extend: {
colors: {
'custom-red': {
500: '#ff0000'
},
}
}
...I have created a custom page with this HTML to test it :
<x-filament-panels::page>
<div class="text-custom-red-500">Test color</div>
</x-filament-panels::page>This file is located under resources/views/filament/pages/settings.blade.php and according to my tailwind config, my should should be compiled.
But, the text shown is black (default color) and not red as expected.
When I use a standard color in the custom page (for example text-success-500), it works fine.
I've looked for answers in the documentation and found this : https://filamentphp.com/docs/3.x/support/colors but I wasn't able to make it work. Here are the steps I followed :
1.
php artisan make:provider FilamentColorServiceProvider2. In the
boot() public function boot(): void
{
FilamentColor::register([
'custom-color' => Color::hex('#ff0000'),
]);
}
