Filament•2y ago•

29 replies

Help me understand why tailwind partially works in livewire component on custom Dashboard?

I have created a custom Dashboard page, and there is method createReport.

public function createReport()
    {
        return Action::make('createReport')
            ->modalHeading('')
            ->color(fn() => Color::Pink)
            ->icon('heroicon-o-presentation-chart-bar')
            ->modalContent(function () {
                return view('livewire.staff.report', [
                    'date' => $this->date,
                ]);
            })
            ->modalSubmitActionLabel('Send report to Milan')
            ->iconSize('w-10 h-10')
            ->action(fn() => dispatch_sync(new DailyReport()));
    }

public function createReport()
    {
        return Action::make('createReport')
            ->modalHeading('')
            ->color(fn() => Color::Pink)
            ->icon('heroicon-o-presentation-chart-bar')
            ->modalContent(function () {
                return view('livewire.staff.report', [
                    'date' => $this->date,
                ]);
            })
            ->modalSubmitActionLabel('Send report to Milan')
            ->iconSize('w-10 h-10')
            ->action(fn() => dispatch_sync(new DailyReport()));
    }

I get my livewire page, but all the tailwind style i want to apply into it fails and styles simply are not applied.
So, first i thought somehow this report.blade.php is not aware of tailwind, but it is, as if i change text-gray-500 to text-gray-200 i can see the difference.
However, classes with grid, bg-, and others, they simply are not applied on that livewire blade page.
So, something like this:

<div class="text-sm text-gray-500">Select a date to view the report</div>

<div class="text-sm text-gray-500">Select a date to view the report</div>

and change to

text-gray-200

text-gray-200

or change

text-2xl

text-2xl

works.
But if i try to add

bg-orange-600

bg-orange-600

which i use on Dashboard page calling this livewire.staff.report via action, it will not work and no background is added. Also, if i try to use something like

grid grid-cols-3

grid grid-cols-3

does not work, but if i use

flex justify-between

flex justify-between

it does work.

I read someone mention custom themes, and i followed link and honestly absolutely dont understand it. And i dont need any custom theme.

What could cause it?

Solution

Yes. Because