Laravel 11 Livewire 3 issue rendering classes.

[jlarm]

I have a model attribute below.

 public function getStatusColorAttribute(): string
  {
      return match($this->status) {
          'active' => 'green',
           'inactive' => 'orange',
           'imported' => 'blue',
           default => 'gray',
      };
  }

And it is used in a blade file. bg-{{ $dealership->status_color }}-100

<td class="size-px whitespace-nowrap px-4 py-1">
    <span class="py-1.5 ps-1.5 pe-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium bg-{{ $dealership->status_color }}-100 text-{{ $dealership->status_color }}-800 rounded-full dark:bg-neutral-500/20 dark:text-neutral-500">
      {{ $dealership->status }}
    </span>
</td>

But when viewing the site it does not render the color at all for 'active' which should have a green background and text.

And the source looks correct when inspecting:

I did add this to app.js but did now help for this situation.

[jahaganiev]

Hey @jlarm - it doesn't seem the issue is related to Preline UI!

[Fludem]

@jlarm you have to remember that tailwind won't generate every single class that it provides as you'd have an overly large CSS file with a load of classes you don't even need

It scans your files for the classes in use and then generates the CSS you actually need, see here: https://tailwindcss.com/docs/content-configuration

If you're doing bg-{something}-green, it won't know to generate the classes required for every possible colour. It also generates the CSS when you run npm run build or dev, and you don't actually know what colour to draw until a user visits the page.

This is probably why you're experiencing what you're experiencing

There's a ton of ways to do this but I'd probably just add an ENUM with all of the supported color classes (the full class too like 'bg-green-100') and then point your tailwind config at that file in the content paths, that way it'll compile all the CSS required to support it.

[NikarashiHatsu]

The better approach is, add your enums to the TailwindCSS config file, for example:

export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        'node_modules/preline/dist/*.js',
        'app/Enums/**/*.php',
    ],
    ...
}

And change your enum to comply the "complete" TailwindCSS classes such as:

public function getStatusColorAttribute(): string
{
    return match($this->status) {
        'active' => 'bg-green-100 text-green-800',
        'inactive' => 'bg-orange-100 text-orange-800',
        'imported' => 'bg-blue-100 text-blue-800',
        default => 'bg-gray-100 text-gray-800',
    };
}