Filament Infolist: Create Custom Components with Tailwind CSS

Filament v3 has an awesome Infolist feature, but the components are pretty limited, like TextEntry or ImageEntry. What if you want to create your own custom entry? This tutorial will teach you how to make a custom Filament Infolist Component with custom CSS styling.

As an example, we will have Course and Lesson Models. Our main goals are:

• To display a list of all lessons on the view Course page
• Re-use the same component and display a list of all lessons on the view Lesson page
• Highlight the current Lesson on the view Lesson page
• Style list using TailwindCSS by compiling a custom theme

First, let's quickly set up our models and data.

Migrations, Models, Factories & Seeds

Let's create Course and Lesson Models with Migrations and Factories by passing the -mf flag.

php artisan make:model Course -mf
 
php artisan make:model Lesson -mf

The database schema is as follows.

database/migrations/XX_create_courses_table.php

Schema::create('courses', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->longText('content')->nullable();
    $table->timestamps();
});

database/migrations/XX_create_lessons_table.php

use App\Models\Course;
 
// ...
 
Schema::create('lessons', function (Blueprint $table) {
    $table->id();
    $table->foreignIdFor(Course::class);
    $table->string('name');
    $table->longText('content')->nullable();
    $table->timestamps();
});

Now let's define our fillable fields and...