Get all colors to create a select element

Hello Filament's lovers. Is there a way to get colors defined in

tailwind.config.js

tailwind.config.js

(default tailwind and extended) in array ? I'd like to build a select element to pick one in form. If not, do you have any tips to get colors to accomplish this ?

5 Replies

ChesterS•12mo ago

If you're using Filament forms for the select, you can have a look at Filament\Support\Colors\Color class. I believe it has all (or most?) tailwind stuff

awcodes•12mo ago

Do you need all of the tailwind colors or all of the colors registered on the panel?

yagrasdemondeOP•12mo ago

all tailwind colors defined in tailwind conf, so default and eventually, these in extend array

awcodes•12mo ago

Could possibly save the colors in a json file, then import them into your TW config file. And for the select, in the options callback use File::json() to get the json file and parse the array into the options you need. But I think you going to have a bigger issue in that even doing this will not guarantee that the color will be in the final built css file. If a class isn’t used in the files TW scans it won’t be used in the build. You would have to use TW’s safelist option to force it to always include all of the colors.

yagrasdemondeOP•12mo ago

Thanks awcodes for your point of view. It opens me this way: I create an Enum class, where I define each color needed, get tints of hint with

use Filament\Support\Colors\Color;


enum Colors: string implements HasColor, HasLabel
{
    case Primary = 'primary';
    case Slate = 'slate';
    ...

 public function getColor(): string | array | null
    {
        return match ($this) {
            self::Primary => [
                50 => '253, 253, 254',
                100 => '241, 240, 247',
                ...
            ],
            self::Slate => Color::Slate,
        };
    }

}

use Filament\Support\Colors\Color;


enum Colors: string implements HasColor, HasLabel
{
    case Primary = 'primary';
    case Slate = 'slate';
    ...

 public function getColor(): string | array | null
    {
        return match ($this) {
            self::Primary => [
                50 => '253, 253, 254',
                100 => '241, 240, 247',
                ...
            ],
            self::Slate => Color::Slate,
        };
    }

}

And to retrieve these colors I call

$colorsEnum = collect(Colors::cases())
            ->mapWithKeys(static fn ($case) => [
                $case->value => $case->getColor(),
            ])

$colorsEnum = collect(Colors::cases())
            ->mapWithKeys(static fn ($case) => [
                $case->value => $case->getColor(),
            ])

And using rgb values, no problem in final css 🙂 thanks

Gaming

Programming

Get all colors to create a select element