allowing html in option labels of `select` component

I used the exact code in Filament's documentation

use Filament\Forms\Components\Select;
 
Select::make('technology')
    ->options([
        'tailwind' => '<span class="text-blue-500">Tailwind</span>',
        'alpine' => '<span class="text-green-500">Alpine</span>',
        'laravel' => '<span class="text-red-500">Laravel</span>',
        'livewire' => '<span class="text-pink-500">Livewire</span>',
    ])
    ->searchable()
    ->allowHtml()

use Filament\Forms\Components\Select;
 
Select::make('technology')
    ->options([
        'tailwind' => '<span class="text-blue-500">Tailwind</span>',
        'alpine' => '<span class="text-green-500">Alpine</span>',
        'laravel' => '<span class="text-red-500">Laravel</span>',
        'livewire' => '<span class="text-pink-500">Livewire</span>',
    ])
    ->searchable()
    ->allowHtml()

not only in my own project, but also I've tried it in Filament's demo project, but none of the color related classes such as text-* or bg-* are working. this issue is while classes like italic , font-bold, line-through are successfully applied.

use Filament\Forms\Components\Select;
 
Select::make('technology')
    ->options([
        'tailwind' => '<span class="italic">Tailwind</span>',
        'alpine' => '<span class="text-bold">Alpine</span>',
        'laravel' => '<span class="line-through">Laravel</span>',
        'livewire' => '<span class="underline">Livewire</span>',
    ])
    ->searchable()
    ->allowHtml()

use Filament\Forms\Components\Select;
 
Select::make('technology')
    ->options([
        'tailwind' => '<span class="italic">Tailwind</span>',
        'alpine' => '<span class="text-bold">Alpine</span>',
        'laravel' => '<span class="line-through">Laravel</span>',
        'livewire' => '<span class="underline">Livewire</span>',
    ])
    ->searchable()
    ->allowHtml()

Is it due to something I missed when configuring the project?

Select - Form Builder - Filament

2 Replies

ebrahimimamiOP•3mo ago

I still have this issue 🤕

LeandroFerreira•3mo ago

You need to create a custom theme if you are using tailwind classes that are not already used in Filament https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

Gaming

Programming

allowing html in option labels of `select` component