F
Filament•11mo ago
Čamap

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
awcodes•11mo 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?
Čamap
Čamap•11mo 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
awcodes•11mo ago
Looks fine to me
Čamap
Čamap•11mo ago
Maybe some cache thing?
awcodes
awcodes•11mo ago
could be
Čamap
Čamap•11mo ago
Any commands for refreshing it? I dont suppose cache:clear takes care of that 😄
awcodes
awcodes•11mo ago
since it's a stylesheet i'd think it'd be browser cache, but optimize:clear is good too.
Čamap
Čamap•11mo ago
Nope, stil nothing :/ not even browser change
awcodes
awcodes•11mo ago
working fine for me
No description
Čamap
Čamap•11mo ago
well... fuck 😄 same tailwind config file?
awcodes
awcodes•11mo 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.
Čamap
Čamap•11mo ago
yeah, pretty much the same I've been stuck on this for like 2-3 hours by now
awcodes
awcodes•11mo ago
maybe an npm update?
Čamap
Čamap•11mo ago
still nothing
awcodes
awcodes•11mo 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
Čamap
Čamap•11mo ago
nope, I just installed the full panel builder and then ran php artisan make:filament-panel admin
awcodes
awcodes•11mo ago
so you're not using a custom theme?
Čamap
Čamap•11mo ago
nope
awcodes
awcodes•11mo ago
well there's your problem.
awcodes
awcodes•11mo ago
Čamap
Čamap•11mo ago
So if I get rid of the separated Admin panel and use just the "default panel", it will work as intended?
awcodes
awcodes•11mo 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
Čamap
Čamap•11mo 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
awcodes•11mo ago
unfortunately, that's just not how tailwind works, it has to purge out unused classes. otherwise the css file would be 10MB. 🙂
Čamap
Čamap•11mo 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
awcodes•11mo 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
Čamap
Čamap•11mo 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
awcodes•11mo 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.
Čamap
Čamap•11mo 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 ❤️
Want results from more Discord servers?
Add your server
More Posts
Reuse the form schema in resource to call it from action buttons aroundHello. I am using Select::make('field_name') with the options of createOptionForm and also editOptioText or TextInput fiedl can be dynamically populated?In my filament project, I've created the student form which has details about fee_plan and entered sHow can I run Alpine.js code from php or blade?I want to create a music player, and even though the plain alpine code works, I need to intergrade iUpdate related tableI have a custom action which opens a modal, and create records in a related table. I would like to eAccess handleRecordCreation on resourceI have a create class in one of my resources, within this resource i use the `handleRecordCreation()something like closeModalByClickingAway() in v2 ?I need to prevent the autoclose modal when you click out of the form (in a relation manager form). ISetting current date and time on DateTimePickerHi, Is it possible to display a "now" button or something that sets the date time picker fields to tTenancy Create CategoryI get this error, I don't really know why...Disable "Save changes" buttonIs there a way to disable the "Save changes" button in the edit page? Based on certain conditions seIs there a way to split Widgets?I have a View resource with possibly up to 6 footer widgets. When all 6 widgets need to be visible,