Filament•15mo ago

How to change the logo size?

How to change the logo size? <img src="{{ asset('/images/logo.svg') }}" alt="Logo" class="h-10"> Anything other than h-10 doesn't work?

7 Replies

awcodes•15mo ago

You need to use a custom theme to use tailwind classes that do not exist in filaments stylesheet. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

DakaaOP•15mo ago

@awcodes I'm following that guide, I tried two ways to achieve it. Method A: my own attempt on using Tailwind JIT (not working) resources/views/vendor/filament-panels/components/logo.blade.php

<img src="{{ asset('/images/logo.svg') }}" alt="Logo" class="h-[100px]">

<img src="{{ asset('/images/logo.svg') }}" alt="Logo" class="h-[100px]">

Method B: css hooks suggested on doc (working) resources/views/vendor/filament-panels/components/logo.blade.php

<img src="{{ asset('/images/logo.svg') }}" alt="Logo" class="fi-logo">

<img src="{{ asset('/images/logo.svg') }}" alt="Logo" class="fi-logo">

theme.css

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

.fi-simple-header .fi-logo {
    @apply h-[100px];
}

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

.fi-simple-header .fi-logo {
    @apply h-[100px];
}

Does anyone know whether styling filament components using tailwind JIT is possible? or is using css hooks + tailwind directives in css file the only way for now?

josef•15mo ago

add './resources/views/vendor/filament-panels/**/*.blade.php', to your panel's tailwind config's content option

mujyy•15mo ago

DakaaOP•15mo ago

@justjosef thankyou so much solved, how do i close

josef•15mo ago

right click on my answer, select apps, then mark as solution

Martin•15mo ago

This should be added to the official documentation, i was looking this solution for hours! Thx dude!

Gaming

Programming

How to change the logo size?