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 :
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 FilamentColorServiceProvider
2. In the boot() method I added :
public function boot(): void
{
FilamentColor::register([
'custom-color' => Color::hex('#ff0000'),
]);
}2 Replies
After the tailwind file did you run npm run build? Where is the tailwind file located?
Is the custom page in the content locations?
Yes I did run
npm run build. I'm using npm run dev with hot reload so the theme should be up-to-date there anyway.
My tailwind.config.js is located under /resources/css/filament/admin/tailwind.config.js
Yes, the "content" property of Tailwind specifies './resources/**/*.blade.php' and my file is located there : resources/views/filament/pages/settings.blade.php. I created the custom page using php artisan make:filament-page Settings without using any resource.