Filament•14mo ago

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

8 Replies

Altffenser•14mo ago

I think it has to do with replacing some tailwind variables, try removing presets: [preset] from the tailwind.config.js file. Note: it remove custom colors from Filament. The best way to skip this is create your own theme.

newbieOP•14mo ago

I dont have presets: [presets] in my tailwind.config.js. 😦 looks like vite is not picking up the classes present in my blade file (even though it is in the resources/views folder) which is part of the content section in tailwind config.
I just changed mt-4 to mt-8 in the above example and did a 'npm run build' to regenerate app.css, and app.css does not have any reference to mt-8 in it 😦 I am monkeying around with this issue for last 8 hours now.

Altffenser•14mo ago

Please, share you tailwind.config.js And you view folder structure.

newbieOP•14mo ago

tailwind.config.ts (default which comes with laravel with just additional colors & font added)

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            colors: {
                myblue: '#1e3c78',
                mygreen: '#73be46',
            },
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            colors: {
                myblue: '#1e3c78',
                mygreen: '#73be46',
            },
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

and the view folder structure / blade file location is

resources/views/filament/app/resources/assessment-plan-resource/pages/assessment.blade.php

resources/views/filament/app/resources/assessment-plan-resource/pages/assessment.blade.php

Dennis Koch•14mo ago

Did you follow the docs for creating your own theme?

newbieOP•14mo ago

I have not created any custom theme. Just using what comes with filament by default.
I have generated a custom-page (linked to the AssessmentPlanResource) and added a div into it's blade (generated using make:filament-page command) as shown above.

Solution

Dennis Koch•14mo ago

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

newbieOP•14mo ago

Thank you for directing me. I was "ass"uming that the page isusing the filament-panels component and hence everything should work as usual. I anyways will need a custom theme to change styles, but was postponing it to complete the functionality. Let me start my fight with the theming now. Thanks once again.

Gaming

Programming

Styling not getting applied in filament custom-page