Styling & Tailwind

FilamentCraft ships compiled fallback CSS so the editor and the built-in sections are usable immediately after php artisan filamentcraft:install. For a real project, you should still use a Filament custom theme and let the host app compile the Tailwind classes used by this package and by your own sections.

Why a custom theme

Filament's default panel stylesheet only contains Filament's own UI classes. Any Tailwind utilities used in package views, custom pages, custom section Blade files, or section PHP classes must be visible to the host app's Tailwind build.

1. Create a panel theme

Create a panel theme if the app does not already have one:

bash

php artisan make:filament-theme admin

2. Register it on the panel

php

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->viteTheme('resources/css/filament/admin/theme.css')
        ->plugin(FilamentCraftPlugin::make());
}

3. Add FilamentCraft (and your section) sources

Add FilamentCraft and your own section sources to resources/css/filament/admin/theme.css:

css

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

/* FilamentCraft editor views, field views, and PHP classes that emit classes. */
@source '../../../../vendor/filamentcraft/filamentcraft/resources/views/**/*.blade.php';
@source '../../../../vendor/filamentcraft/filamentcraft/src/**/*.php';

/* Your host-app sections. */
@source '../../../../app/Sections/**/*.php';
@source '../../../../resources/views/sections/**/*.blade.php';

@custom-variant dark (&:where(.dark, .dark *));

4. Rebuild

Rebuild after changing the source list:

bash

npm run build
php artisan filament:assets

This follows Filament's plugin guidance: plugin views that use Tailwind should be included in the host custom theme with @source. FilamentCraft keeps its compiled CSS enabled as a fallback for quick installs and for users who have not created a custom theme yet.

Preview & public-page styling

The Filament panel theme styles the editor chrome. The iframe preview and public template output are separate HTML documents that need their own CSS. See Preview & Public Assets for the three-tier asset model.

Styling & Tailwind ​

Why a custom theme ​

1. Create a panel theme ​

2. Register it on the panel ​

3. Add FilamentCraft (and your section) sources ​