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>)");
})

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

text-primary-400

text-primary-400

will work, but not

text-danger-400

text-danger-400

text-danger-400

text-danger-400

.

In the full implementation, I would use a

match

match

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.

:wq

Jump to solution

HTML with colour in TextColumn description

Similar Threads

Similar Threads

Similar Threads