Filament•6d ago

HTML with colour in TextColumn description

Hi all, I've been working with Filament for a few days, looking to replace a Nova admin interface with something more flexible. I have a table, and in a column I wish to show a description under the main content, and depending on the value or attributes in the record I'm displaying, I want part of the text of the description to be coloured. I am trying to do this by wrapping the returned value for the description in an HtmlStrring, then applying tailwind classes to colour, but it isn't working.
I'm more a backend than frontend dev, but feel this is something to do with tailwind not picking up the classes. A simplified column definition is:

Tables\Columns\TextColumn::make("average_games")
  ->description(function (TeamSeasonStatistic $stat) {
    return new HtmlString("$stat->value (<span class='text-danger-400'>{$stat->average}</span>)");
})

Tables\Columns\TextColumn::make("average_games")
  ->description(function (TeamSeasonStatistic $stat) {
    return new HtmlString("$stat->value (<span class='text-danger-400'>{$stat->average}</span>)");
})

Note that

text-primary-400

text-primary-400

will work, but not

text-danger-400

text-danger-400

. In the full implementation, I would use a

match

match

or similar to use different colours depending on teh value. TIA :wq

Solution:

Thanks all for assistance with this, I now have it working. I think part of my issue was after originally installing filament a few days ago, I ignored an 'npm run dev' error which stated 'dev' wasn't an available script. Turns out I didn't have a 'vite' setup, or a 'tailwind.config.js' file. Not sure why this was, maybe because my project is a couple of years old and was originally built on Laravel 10 (maybe 9) before upgrading. Anyway, after setting up tailwind and vite, and running 'npm run dev', inclusion of these colours started to be recognised and working....

Jump to solution

7 Replies

toeknee•6d ago

text-danger-400 likely isn't included in the tailwind compile. Add it to a blade wiht a div class within the resources dir to include it

potz1024OP•6d ago

Thanks for the pointer, thought it was something along those lines. Can't find any template I could change at this stage, but will continue investigating.

bernhard•6d ago

You can just add the class to the tailwind whitelist as well. This would be cleaner in my opinion.

Dennis Koch•6d ago

Do you already have a custom theme? Otherwise this would be the way to start.

potz1024OP•6d ago

Thanks, custom theme or tailwind whitelist sound even better to me, will investigate.

Dennis Koch•5d ago

You don't even need a whitelist if you include the right files for Tailwind to search

Solution

potz1024•3d ago

Gaming

Programming

HTML with colour in TextColumn description

Did you find this page helpful?