Filament•3mo ago

Tailwind not picking up classes after upgrade to filament v4

I have recently upgraded to filament v4 and with that to tailwind v4, but where v3 used to pick up and include styles in my custom blade components, v4 doesn't seem to do that. For reference here is my configuration: vite.config.js:

import {defineConfig} from 'vite';
import laravel, {refreshPaths} from 'laravel-vite-plugin'
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/student/theme.css', 'resources/css/filament/teacher/theme.css', 'resources/css/filament/admin/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
                'app/Providers/Filament/**',
            ],
        }),
    ],
});

import {defineConfig} from 'vite';
import laravel, {refreshPaths} from 'laravel-vite-plugin'
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/student/theme.css', 'resources/css/filament/teacher/theme.css', 'resources/css/filament/admin/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
                'app/Providers/Filament/**',
            ],
        }),
    ],
});

app.css

@import 'tailwindcss';

@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../storage/framework/views/*.php';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}

@import 'tailwindcss';

@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../storage/framework/views/*.php';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}

theme.css (for the panel):

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

@source '../../../../app/Filament/Admin/**/*';
@source '../../../../resources/views/filament/admin/**/*';

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

@source '../../../../app/Filament/Admin/**/*';
@source '../../../../resources/views/filament/admin/**/*';

Solution:

Okay, so I've fixed that too, I'm just leaving the solution here, if you are extending a filament page class and rendering that outside a panel, you have to add the @vite directive to the layout used by the pages (I did this by overwriting the base layout, there might be a better solution)

Jump to solution

3 Replies

XeretisOP•3mo ago

Now I have this issue in multiple places, once with a component that I'm trying to render on the admin panel using a render hook, but also on a custom livewire component, that isn't part of any panel but rendered as a full page component, here is the source code for that:

<x-filament-panels::page.simple>
    @if($userInvite->expires_at?->isPast() || ($userInvite->max_uses  !== null && $userInvite->uses >= $userInvite->max_uses))
        <p class="text-gray-600 dark:text-gray-400 text-center">Kérlek vedd fel a
            kapcsolatot egy adminnal egy új meghívóért!
        </p>
    @else
        @auth
            <x-slot name="subheading">
                Úgy néz ki, hogy már van egy fiókod, amibe be is vagy
                lépve. <b class="text-blue-500">Biztos hogy új fiókot akarsz regisztrálni?</b>
            </x-slot>
        @endauth
        {{ $this->content }}
    @endif
</x-filament-panels::page.simple>

<x-filament-panels::page.simple>
    @if($userInvite->expires_at?->isPast() || ($userInvite->max_uses  !== null && $userInvite->uses >= $userInvite->max_uses))
        <p class="text-gray-600 dark:text-gray-400 text-center">Kérlek vedd fel a
            kapcsolatot egy adminnal egy új meghívóért!
        </p>
    @else
        @auth
            <x-slot name="subheading">
                Úgy néz ki, hogy már van egy fiókod, amibe be is vagy
                lépve. <b class="text-blue-500">Biztos hogy új fiókot akarsz regisztrálni?</b>
            </x-slot>
        @endauth
        {{ $this->content }}
    @endif
</x-filament-panels::page.simple>

Here I used the text-blue-500 class, but when going to this page the text doesn't turn blue and there doesn't seem to be any styling associated with that class. What am I doing wrong? Thank you in advance! Now I noticed that I don't see in the console that vite is connected, which is strange. Here is my app layout for reference too:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="antialiased">
{{ $slot }}

@livewire('notifications')

@filamentScripts
@vite('resources/js/app.js')
</body>
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="antialiased">
{{ $slot }}

@livewire('notifications')

@filamentScripts
@vite('resources/js/app.js')
</body>
</html>

Vite is connected on the panel tho, where my custom components also appear unstyled Alright, so I've managed to fix this issue on the panel, had to add the component to the sources, but now I'm completely puzzled by why vite isn't connecting to my livewire page (I assume if that's fixed, the styling will work too)

Solution

Xeretis•3mo ago

XeretisOP•3mo ago

The better solution is to add this to end of the page:

@push('styles')
    @vite('resources/css/app.css')
@endpush

@push('scripts')
    @vite('resources/css/app.css')
@endpush

@push('styles')
    @vite('resources/css/app.css')
@endpush

@push('scripts')
    @vite('resources/css/app.css')
@endpush

This way you don't overwrite anything

Gaming

Programming

Tailwind not picking up classes after upgrade to filament v4

Did you find this page helpful?