Styling not getting applied in filament custom-page

Hello,

I have created a custom page to place my custom livewire components. But the div with basic styling in it's blade file itself not rendering (present in the html - view source though). So, I get see a blank page in the example below.

I am not using any forms or tables in this custom page. I intend to use my own custom livewire components later. So, not using the hasTables, hasForms interfaces on this page

Have a basic custom page class (created with make:filament-page associated with a resource) which takes an object with route model binding in the mount method (and I want to render this record in the blade further with my custom livewire components later)

Custom Page class:

class Assessment extends Page
{
    public $record;

    protected static string $resource = AssessmentPlanResource::class;

    protected static string $view = 'filament.app.resources.assessment-plan-resource.pages.assessment';

    protected ?string $heading = '';

    public function mount(AssessmentPlan $record)
    {
        $this->record = $record;
    }

}

class Assessment extends Page
{
    public $record;

    protected static string $resource = AssessmentPlanResource::class;

    protected static string $view = 'filament.app.resources.assessment-plan-resource.pages.assessment';

    protected ?string $heading = '';

    public function mount(AssessmentPlan $record)
    {
        $this->record = $record;
    }

}

I have put some basic styling for the div in the blade file (of the custom page)

Custom Page blade:

<x-filament-panels::page>
    <div class="w-1/2 m-auto mt-4 p-4 text-white bg-gray-500 rounded">
        hello
    </div>
</x-filament-panels::page>

<x-filament-panels::page>
    <div class="w-1/2 m-auto mt-4 p-4 text-white bg-gray-500 rounded">
        hello
    </div>
</x-filament-panels::page>

Note: just 'hello' gets rendered on screen with default body styling of bg-gray-50 and text-gray-950 if I remove the div styling (as intended). But, in the above case - with div styling, the bg styling disappears. And, if I change text-white to, say, text-red-500, then even the text color defaults to text-gray-950. Looks like CSS styles are not compiled and using the styles inherited from .body (doesn't make sense to me)

Where am I going wrong? Can someone please guide me?

Solution

Well, there you go. You need a custom theme, because Tailwind strips out any classes we don't use with default Filament.

Jump to solution

Styling not getting applied in filament custom-page

Similar Threads

Similar Threads

Similar Threads