#Some CSS seemingly to being applied after v4 upgrade

11 messages · Page 1 of 1 (latest)

scenic mesa
#

I just upgraded with the script, everything mostly looks fine except:

  • Company Logo is too big
  • Stats widget not taking up full width

Right now I want to focus on the logo and I'll solve the widget issue later, just wanted to mention it because it might be related.

It seems like CSS is not updating because changing anything in the blade view isn't getting applied

here's the logo.blade.php:

<div class="flex gap-2 items-center justify-center">
    <img class="h-8 flex-1" src="{{ asset('assets/logo.png') }}" />
    <h2 class="font-bold">CNFCPP Pay</h2>
</div>

here's what my CSS setup looks like right now

My dev dependencis

{
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.7",
        "@tailwindcss/typography": "^0.5.13",
        "autoprefixer": "^10.4.19",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.39",
        "postcss-nesting": "^12.1.5",
        "prettier": "^3.3.2",
        "tailwindcss": "^3.4.4",
        "vite": "^5.0"
    }
}

My tailwind config:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.7",
        "@tailwindcss/typography": "^0.5.13",
        "autoprefixer": "^10.4.19",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.39",
        "postcss-nesting": "^12.1.5",
        "prettier": "^3.3.2",
        "tailwindcss": "^3.4.4",
        "vite": "^5.0"
    }
}

app.css:


@tailwind base;
@tailwind components;
@tailwind utilities;
image.png
pseudo topaz
#

Filament v4 uses tailwind v4 start by upgrading that.

scenic mesa
#

unless I add this line from my frontend: @vite('resources/css/app.css') which feels very hacky so I'd love to find another proper solution

pseudo topaz
#

Then you need to use a custom theme for filament that has the custom views in the @source directive of the custom theme

scenic mesa
#

Sure, I'll look into that, but it would be great if styles worked out of the box as they did in v3

opaque canyonBOT
pseudo topaz
#

V3 was the same.

scenic mesa
# pseudo topaz V3 was the same.

What I meant was this view in v3 was integrated in filament so it received it's styling from there but now it seems to be handled seperately, and mind you I am not using any custom non-documented plugin to do this, I'm simply passing a logo view to my panel with ->brandLogo(fn () => view('filament.admin.logo'))

pseudo topaz
#

Right but the way tailwind works, if it isn’t looking for the view in that location then any classes won’t get processed as part of the tree shaking.

#

So, unless tailwind knows to look for that file it won’t apply the classes in the stylesheet, meaning that if filament itself doesn’t have a ‘w-4’ it will not be included in the theme/stylesheet.