F
Filament•2mo ago
dotdotdot

Some CSS seemingly to being applied after v4 upgrade

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>
<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"
    }
}
{
    "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"
    }
}
{
    "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;
@tailwind base;
@tailwind components;
@tailwind utilities;
No description
Solution:
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
Jump to solution
8 Replies
awcodes
awcodes•2mo ago
Filament v4 uses tailwind v4 start by upgrading that.
dotdotdot
dotdotdotOP•2mo ago
Updated tailwind now it works on my own non-filament frontend, but the logo is still not being styled properly
Solution
dotdotdot
dotdotdot•2mo ago
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
awcodes
awcodes•2mo ago
Then you need to use a custom theme for filament that has the custom views in the @source directive of the custom theme
dotdotdot
dotdotdotOP•2mo ago
Sure, I'll look into that, but it would be great if styles worked out of the box as they did in v3
awcodes
awcodes•2mo ago
V3 was the same.
dotdotdot
dotdotdotOP•2mo ago
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'))
awcodes
awcodes•2mo ago
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. It’s just how tailwind works.

Did you find this page helpful?