Filament•15mo ago

Understanding view rendering

I'm trying to get the css hooks to work, but I think I'm misunderstanding something. I have this problem both in my own app & in the demo app. If I add this: .fi-form { @apply !bg-blue-300 !p-12 rounded-xl; } to resources/css/app.css and run "npm run build", I get nothing. How is the publishing supposed to work? Thanks for the help in advance! ps. I'm not new to PHP and neither to Laravel or Livewire, but I'm really struggling to understand some aspects of Filament. There is a lot of power, but as there are no source code comments there is a lot of trial and error. If I continue with Filament, I'm sure to submit some PR's regarding the documentation and code comments...

31 Replies

Patrick Boivin•15mo ago

Are you trying to customize this inside of a Panel or in a custom page outside of Filament?

Timster8989OP•15mo ago

I’m trying to put it as a general style for all of site’s forms. I’m testing on a Filament resource for a form that I display and it has that css selector.

Patrick Boivin•15mo ago

Can you share your Tailwind config?

Timster8989OP•15mo ago

Thanks a million @pboivin for helping! Here is the config:

 const colors = require('tailwindcss/colors')
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import preset from './vendor/filament/support/tailwind.config.preset'

module.exports = {
    content: ['./resources/**/*.blade.php', './vendor/filament/**/*.blade.php'],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                secondary: colors.gray,
                success: colors.green,
                warning: colors.yellow,
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

 const colors = require('tailwindcss/colors')
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import preset from './vendor/filament/support/tailwind.config.preset'

module.exports = {
    content: ['./resources/**/*.blade.php', './vendor/filament/**/*.blade.php'],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                secondary: colors.gray,
                success: colors.green,
                warning: colors.yellow,
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

And here is vite.config.js

 import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Filament/**',
                'app/Forms/Components/**',
                'app/Livewire/**',
                'app/Infolists/Components/**',
                'app/Providers/Filament/**',
                'app/Tables/Columns/**',
            ],
        }),
    ],
})

 import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Filament/**',
                'app/Forms/Components/**',
                'app/Livewire/**',
                'app/Infolists/Components/**',
                'app/Providers/Filament/**',
                'app/Tables/Columns/**',
            ],
        }),
    ],
})

Patrick Boivin•15mo ago

I think the ** are affecting the formatting a bit Can you add ``` around everything? ``` code ``` Beautiful

Timster8989OP•15mo ago

🙂 sry, didn't realise Discrod supports this

Patrick Boivin•15mo ago

I think it looks good... I was wondering about the Tailwind content specifically. Hum, so you're adding your CSS in resources/css/app.css?

Timster8989OP•15mo ago

Yes. I've tried also adding another css file entirely to do the same thing, but also doesn't help.

Patrick Boivin•15mo ago

Just as a test, can you try something like:

body {
    border: 10px solid red !imporant;
}

body {
    border: 10px solid red !imporant;
}

Timster8989OP•15mo ago

writing it as a non-tailwind css works. So somehow it's about @apply not being, eh, applied

Patrick Boivin•15mo ago

Hehe. Can you get anything else done with @apply? Something like

body {
    @apply p-64 !important;
}

body {
    @apply p-64 !important;
}

Timster8989OP•15mo ago

nope 😦 doesn't work I'm afraid

Timster8989OP•15mo ago

I think wrong css is getting applied on pages

Timster8989OP•15mo ago

sry, I'm really rather confused with this ...

Patrick Boivin•15mo ago

If you do 'view source' in the Browser, do you see app.1fe...css being loaded?

Timster8989OP•15mo ago

so looks like my npm run dev does the replacement, but this built asset file is never included on the page nope, it's not

Patrick Boivin•15mo ago

Maybe just missing a @vite() directive in your layout? https://github.com/pboivin/filament-peek-demo/blob/2.x/resources/views/components/layouts/main.blade.php#L12

Timster8989OP•15mo ago

hmm. I wonder could this be about sidemenu extension ... I have only app.blade.php on that directory, but it doesn't seem to be used (if I empty the file it doesn't affect)

Timster8989OP•15mo ago

I'm running Filament 3 and the views seem to be rendered entirely from filament. So I'm not really sure how I can even control this ...

Patrick Boivin•15mo ago

Wait so this in inside of a Panel?

Timster8989OP•15mo ago

Same happens to page as well. This example was from a panel.

Patrick Boivin•15mo ago

Ok, so resources/css/app.css is good for your custom pages. To customize the styles inside of a Panel you need to setup a custom theme. (Just means taking control of the Filament Tailwind config)

Timster8989OP•15mo ago

This is from a custom Filament page

Patrick Boivin•15mo ago

Custom Filament page is also part of a Panel.

Timster8989OP•15mo ago

ahaa!

Patrick Boivin•15mo ago

Sorry, just to clarify: resources/css/app.css is good for your custom pages outside of Filament

Timster8989OP•15mo ago

but if I want to customise the css for the default panel look, I can't achieve it with this strategy at all?

Patrick Boivin•15mo ago

To customize the styles inside of a Panel you need to setup a custom theme: https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

Timster8989OP•15mo ago

Gotcha, I will follow this! Now it's starting to make sense. Thank you so much! Can I buy you a beer? I was running circles, because there is also FilamentAsset::register ... and for some funny reason my page doesn't have tailwind unless I include it from there -> it breaks other stuff. But I'll figure it out now that I got past the biggest stumbling block in understanding.

Patrick Boivin•15mo ago

My pleasure, I appreciate the thought! I don't really have anything setup at the moment in terms of sponsorships, maybe one day 😄

Timster8989OP•15mo ago

Let me know when you do, I'm sure to be first in line. 🙂

Gaming

Programming

Understanding view rendering