laravellaravel-livewirefilamentphp

Filamentphp Form wizard on livewire component not using @filamentStyles or @filamentScripts

I'm able to create a Filamentphp form on a livewire component to display it on a public page. However it's not using the filament styles. Here is my livewire component

<?php

namespace App\Livewire;
use Filament\Forms\Components\Wizard;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Component;

class Submission extends Component implements HasForms
{
    use InteractsWithForms;
    public ?array $data = [];

    public function mount()
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Wizard::make([
                    Wizard\Step::make('Wizard Step 1')
                        ->schema([
                            Select::make('type')
                                ->label('Do you want:')
                                ->options([
                                    'a' => 'A',
                                    'b' => 'B',
                                    'not_sure' => 'Not Sure',
                                ]),
                        ]),

                    Wizard\Step::make('Wizard Step 2')
                        ->schema([
                            TextInput::make('names'),
                        ]),

                ])
            ]);
    }
    public function render()
    {
        return view('livewire.submission');
    }
}

Here is my component view

<div class="flex justify-center items-center min-h-screen">
    <form wire:submit.prevent="submit" class="w-full max-w-md bg-white p-6 rounded shadow">
        <div>
            {{ $this->form }}
        </div>
    </form>
</div>

Here is my page view

<x-app-layout>
    @livewire('submission')
</x-app-layout>

Here is my layout

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <!-- Filament Styles -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    @filamentStyles
</head>
<body class="antialiased bg-gray-100">
    <div class="min-h-screen">
        <!-- Replace this -->
        {{ $slot }}
        <!-- End replacement -->
    </div>

    @livewireScripts
    @filamentScripts
</body>
</html>

Here is my results: enter image description here

You can see the button is white on white, and the dropdown has some funky styling. Is there a way to apply the same theme as from within filament and still have the page public without all of the the menus? Like the login or registration page is.

Solution

  • Leandro Ferreira from the Discord channel answer this and it worked.

    in the vite.config.js file, remove tailwindcss()