Filament•15mo ago

Tailwind classes still missing in filament-page's custom view

Hi, when adding a filament-page with custom view in /resources/views/filament/admin/pages/custom-page.blade.php, shouldnt tailwind with this config make sure to include classes that are used in the view blade (because of ./resources/views/**/*.blade.php rule?

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

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

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

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

Because this doesnt seem to work, I'm still missing the classes and only have filament's builtins available..

29 Replies

awcodes•15mo ago

Did you rerun the build after adding everything to your custom page blade? And is your custom page blade using filament's page component?

ČamapOP•15mo ago

If you mean npm run build then yes, and yes 😄 /resources/views/filament/admin/pages/custom-page.blade.php

<x-filament-panels::page>
    <div class="bg-black">Test</div>
</x-filament-panels::page>

<x-filament-panels::page>
    <div class="bg-black">Test</div>
</x-filament-panels::page>

/reservations/app/Filament/Admin/Pages/CustomPage.php

<?php

namespace App\Filament\Admin\Pages;

use Filament\Pages\Page;

class CustomPage extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.admin.pages.custom-page';
}

<?php

namespace App\Filament\Admin\Pages;

use Filament\Pages\Page;

class CustomPage extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.admin.pages.custom-page';
}

bg-gray-400 works, bg-black does not

awcodes•15mo ago

Looks fine to me

ČamapOP•15mo ago

Maybe some cache thing?

awcodes•15mo ago

could be

ČamapOP•15mo ago

Any commands for refreshing it? I dont suppose cache:clear takes care of that 😄

awcodes•15mo ago

since it's a stylesheet i'd think it'd be browser cache, but optimize:clear is good too.

ČamapOP•15mo ago

Nope, stil nothing :/ not even browser change

awcodes•15mo ago

working fine for me

ČamapOP•15mo ago

well... fuck 😄 same tailwind config file?

awcodes•15mo ago

essentially.

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

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-badgeable-column/resources/views/**/*.blade.php',
        './vendor/awcodes/overlook/resources/views/**/*.blade.php',
        './vendor/awcodes/filament-quick-create/resources/views/**/*.blade.php',
        './vendor/awcodes/filament-tiptap-editor/resources/views/**/*.blade.php',
        './vendor/awcodes/filament-curator/resources/views/**/*.blade.php',
        './vendor/awcodes/filament-table-repeater/resources/views/**/*.blade.php',
        './app-modules/**/*.blade.php',
    ],
    theme: {
        extend: {
            borderRadius: {
                sm: '0.125rem',
                DEFAULT: '0.25rem',
                md: '0.25rem',
                lg: '0.375rem',
                xl: '0.5rem',
                '2xl': '1rem',
                '3xl': '1.5rem',
            },
        },
    },
}

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

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-badgeable-column/resources/views/**/*.blade.php',
        './vendor/awcodes/overlook/resources/views/**/*.blade.php',
        './vendor/awcodes/filament-quick-create/resources/views/**/*.blade.php',
        './vendor/awcodes/filament-tiptap-editor/resources/views/**/*.blade.php',
        './vendor/awcodes/filament-curator/resources/views/**/*.blade.php',
        './vendor/awcodes/filament-table-repeater/resources/views/**/*.blade.php',
        './app-modules/**/*.blade.php',
    ],
    theme: {
        extend: {
            borderRadius: {
                sm: '0.125rem',
                DEFAULT: '0.25rem',
                md: '0.25rem',
                lg: '0.375rem',
                xl: '0.5rem',
                '2xl': '1rem',
                '3xl': '1.5rem',
            },
        },
    },
}

only difference is i'm targeting ./resources/views/filament/**/*.blade.php specifically because I have two stylesheets, one for filament and one for frontend.

ČamapOP•15mo ago

yeah, pretty much the same I've been stuck on this for like 2-3 hours by now

awcodes•15mo ago

maybe an npm update?

ČamapOP•15mo ago

still nothing

awcodes•15mo ago

did you generate the theme with the command line? just wondering why your tailwind.config.js is at the root of the app wondering if you're preset path is right, is what i'm getting at would think that would throw an error though if it couldn't find it to import

ČamapOP•15mo ago

nope, I just installed the full panel builder and then ran php artisan make:filament-panel admin

awcodes•15mo ago

so you're not using a custom theme?

ČamapOP•15mo ago

nope

awcodes•15mo ago

well there's your problem.

awcodes•15mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

ČamapOP•15mo ago

So if I get rid of the separated Admin panel and use just the "default panel", it will work as intended?

awcodes•15mo ago

no, you just have to use a theme if you want to do any custom styling each panel could have it's own thme so no need to change the panel you just need to add the generated stylesheet for your custom theme to the vite manifest and the ->viteTheme('path/to/theme.css') to the panel basically what you are doing is createing a whole new stylesheet and telling Filament not to use it's own stylesheet

ČamapOP•15mo ago

Okay, got it.. just the fact that I have to create separate theme when I want to use classes that are not in filament by default seems a bit odd it is not a "theme" per se, I just want to be able to use all available tailwind classes in a filament-page

awcodes•15mo ago

unfortunately, that's just not how tailwind works, it has to purge out unused classes. otherwise the css file would be 10MB. 🙂

ČamapOP•15mo ago

Yeah, I understand that, but then why doesnt the the root tailwind.config.js take over and search for files that should be in the built css file? The blade file for the filament-page is in resources/views folder, so why doesnt tailwind go for it?

awcodes•15mo ago

it can pick it up and build all day long. but you still have to tell Filament to use a different css file Filament can't magically pick it up

ČamapOP•15mo ago

I thought it gets mixed into one bundled css file with the same name that would just contain a few more classes 😄 Sorry if im asking obvious questions btw

awcodes•15mo ago

Filament has a stylesheet that is prebuilt and ships with filament and gets loaded by the panel by default. So, there's no way to add custom styles to it. Therefore, you have to compile you're own version of that stylesheet with your additional tailwind classes. Then tell the panel to ignore it's default stylesheet and load your version.

ČamapOP•15mo ago

Ahh, I think i got it.. I'm reading the docs page over and over.. but I feel like it is saying "Hey, themes are something that you can use to override default filament styles", which is awesome, but in addition to this, I feel like it should say something like "Custom theme is required in order to use tailwind classes that are not built into filament itself".. It doesnt need to be in the same section, but if it is already in the docs somewhere, I definitely missed it 😄 But thank you!! 3 hours not wasted after all ❤️

Gaming

Programming

Tailwind classes still missing in filament-page's custom view