Filament•3w ago

CUSTOM PAGE STYLING

Hello everyone I find it difficult styling custom pages in filament its really frustrating, even though I'm using tailwind cas most of the styles I apply to my custom pages, Components or even views are not applied , can anyone help on how solve this? Thanks

Solution:

In which files do you use the TW classes and are they covered by the content option in tailwind.config (the one next to your theme CSS)

Jump to solution

9 Replies

Jonas•3w ago

Make sure you add your views to your tailwindcss config file, if using a custom theme. And also run the npm dev server

Dennis Koch•3w ago

Did you create a custom theme?

sir_abdullOP•3w ago

Yes I did I created a custom theme I followed the instructions on the filament docs

Dennis Koch•3w ago

Okay, did you run npm run build or npm run dev after changing stuff as Jonas proposed?

sir_abdullOP•3w ago

Thanks yeah, ran npm run build initially, but I guess that's for production, so I'm using npm run dev currently, . do I need to declare the classes in my theme.css ? I use tailwind alright so I just feel the classes should be compiled from my views into thene.css

Solution

Dennis Koch•3w ago

In which files do you use the TW classes and are they covered by the content option in tailwind.config (the one next to your theme CSS)

sir_abdullOP•3w ago

Ohh I don't think they are covered by the content option, I currently have this

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/C:\Users\hp\Desktop\ProjectFolder\ProjectName\app\Filament\Clusters\Shipping\**/*.php',
        './resources/views/filament/c:\-users\hp\-desktop\-p-r-o-j-e-c-t-f-o-l-d-e-r\-projectname\app\-filament\-clusters\-shipping\**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/C:\Users\hp\Desktop\ProjectFolder\ProjectName\app\Filament\Clusters\Shipping\**/*.php',
        './resources/views/filament/c:\-users\hp\-desktop\-p-r-o-j-e-c-t-f-o-l-d-e-r\-projectname\app\-filament\-clusters\-shipping\**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

And my views are normally or should I say all ln. resources/views Thanks I've added

'./resources/views/**/.*.php'

'./resources/views/**/.*.php'

to the options and everything works fine now 😊 ✨️ Thanks much 👏 Also in custom pages I can see a method for getting visible header widgets and hidden as well .is they any helper for toggling this widgets visibility on the page? or I have to implement the logic myself. Thanks

LeandroFerreira•3w ago

Please mark this question as answered if your main question has been resolved. If you have another question, open a new topic and provide the details

sir_abdullOP•3w ago

Ok i will Thanks,

Gaming

Programming

CUSTOM PAGE STYLING

Did you find this page helpful?