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

View Course

View Lesson

View Lesson Dark

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...

The full tutorial [10 mins, 1900 words] is only for Premium Members

Login Or Become a Premium Member for $129/year or $29/month
What else you will get:
  • 59 courses (1057 lessons, total 42 h 44 min)
  • 79 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials