Filament•6mo ago

How to properly set up Filament when building a customer-facing app using TALL Stack preset

It's my first attempt at building a customer-facing Filament app. Here is what I have done step-by-step. 1. install Laravel 10 2. install TALL stack preset 3. install Filament Panel Builder following these instructions 4. create a Livewire component and add a form using Filament's Form Builder following these instructions This is the default layout provided with the TALL stack preset.

<!-- base.blade.php -->

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

        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
        @livewireStyles
        @livewireScripts

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>

    <body>
        @yield('body')
    </body>
</html>

<!-- base.blade.php -->

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

        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
        @livewireStyles
        @livewireScripts

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>

    <body>
        @yield('body')
    </body>
</html>

Following these instructions, I've replaced the layout with this:

<!-- base.blade.php -->

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
 
        @filamentStyles
        @vite('resources/sass/app.scss')
    </head>
 
    <body class="antialiased">
        {{ $slot }}
 
        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

<!-- base.blade.php -->

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
 
        @filamentStyles
        @vite('resources/sass/app.scss')
    </head>
 
    <body class="antialiased">
        {{ $slot }}
 
        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

You'll notice the omission of the @livewireStyles and @livewireScripts directives. I'm assuming @filamentStyles and @filamentScripts overwrite these respectively. I've ran npm run dev but it doesn't seem that the filament styling is being loaded properly. See attached image.

GitHub

GitHub - laravel-frontend-presets/tall: A TALL (Tailwind CSS, Alpin...

A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel - GitHub - laravel-frontend-presets/tall: A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel

Adding a form to a Livewire component - Form Builder - Filament

Installation - Panel Builder - Filament

Solution:

Issue solved. I had to include ./vendor/filament/**/*.blade.php in the content array. ```js...

Jump to solution

1 Reply

Solution

@ryanvelbon•6mo ago

Issue solved. I had to include ./vendor/filament/**/*.blade.php in the content array.

module.exports = {
    content: [
        './vendor/filament/**/*.blade.php',
    ],
}

module.exports = {
    content: [
        './vendor/filament/**/*.blade.php',
    ],
}

Gaming

Programming

How to properly set up Filament when building a customer-facing app using TALL Stack preset