Filament Forms in a Livewire Component - Grid not working and Field not filling containing DIV

[tyroga]

Package

filament/filament

Package Version

v3.0.30

Laravel Version

10.20.0

Livewire Version

3.0.0-beta.10

PHP Version

PHP 8.1

Problem description

The form renders as a single column with one field in each row.

Expected behavior

The form should render with the fields in columns as specified in the "Grid" component.

Steps to reproduce

Regardless of the Grid::make() element in the form, the fields do not render in a grid.

Also, the actual input fields do not fill the width of their containing DIV.

Livewire Controller

public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()->schema([
                    Grid::make()->columns(2)->schema([
                        TextInput::make('first_name')->label('First Name')->required()->maxLength(255),
                        TextInput::make('last_name')->label('Last Name'),
                    ]),
                ]),

                TextInput::make('email_address')->label('Email Address')->nullable(),
                TextInput::make('mobile_phone')->label('Mobile Phone')->nullable(),
            ])
            ->statePath('data')
            ->model($this->record);
    }

Livewire View

<div>
    <form wire:submit="edit">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>

    <x-filament-actions::modals />
</div>

Reproduction repository

https://github.com/tyroga/filamentgridform

Relevant log output

No response

[danharrin]

No reproduction repository.

[mariomeyer]

Same issue. Grid does not work on livewire form.

Resolution:

Was missing install steps for Filament Forms as per https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css