feat: migrate from filament/tailwind 3 to v4

Author: mckenziearts

.env.testing

@@ -31,4 +31,3 @@ SENTRY_LARAVEL_DSN=
 INSPECTOR_ENABLE=false
 
 BCRYPT_ROUNDS=4
-VIEW_COMPILED_PATH=/tmp/views

.mcp.json

@@ -1,11 +1,8 @@
 {
   "mcpServers": {
     "laravel-boost": {
-      "command": "php",
-      "args": [
-        "artisan",
-        "boost:mcp"
-      ]
+      "command": "./vendor/bin/sail",
+      "args": ["php", "artisan", "boost:mcp"]
     }
   }
 }

CLAUDE.md

@@ -8,23 +8,26 @@ The Laravel Boost guidelines are specifically curated by Laravel maintainers for
 ## Foundational Context
 This application is a Laravel application and its main Laravel ecosystems package & versions are below. You are an expert with them all. Ensure you abide by these specific packages & versions.
 
-- php - 8.4.12
-- filament/filament (FILAMENT) - v3
+- php - 8.4.10
+- filament/filament (FILAMENT) - v4
 - laravel/framework (LARAVEL) - v12
+- laravel/nightwatch (NIGHTWATCH) - v1
+- laravel/octane (OCTANE) - v2
 - laravel/prompts (PROMPTS) - v0
 - laravel/socialite (SOCIALITE) - v5
 - livewire/livewire (LIVEWIRE) - v3
 - livewire/volt (VOLT) - v1
 - larastan/larastan (LARASTAN) - v3
 - laravel/breeze (BREEZE) - v2
+- laravel/mcp (MCP) - v0
 - laravel/pint (PINT) - v1
 - laravel/sail (SAIL) - v1
 - pestphp/pest (PEST) - v3
 - phpunit/phpunit (PHPUNIT) - v11
 - rector/rector (RECTOR) - v2
 - alpinejs (ALPINEJS) - v3
 - prettier (PRETTIER) - v3
-- tailwindcss (TAILWINDCSS) - v3
+- tailwindcss (TAILWINDCSS) - v4
 
 
 ## Conventions
@@ -201,19 +204,25 @@ Forms\Components\Select::make('user_id')
 </code-snippet>
 
 
-=== filament/v3 rules ===
+=== filament/v4 rules ===
 
-## Filament 3
+## Filament 4
 
-## Version 3 Changes To Focus On
-- Resources are located in `app/Filament/Resources/` directory.
-- Resource pages (List, Create, Edit) are auto-generated within the resource's directory - e.g., `app/Filament/Resources/PostResource/Pages/`.
-- Forms use the `Forms\Components` namespace for form fields.
-- Tables use the `Tables\Columns` namespace for table columns.
-- A new `Filament\Forms\Components\RichEditor` component is available.
-- Form and table schemas now use fluent method chaining.
-- Added `php artisan filament:optimize` command for production optimization.
-- Requires implementing `FilamentUser` contract for production access control.
+### Important Version 4 Changes
+- File visibility is now `private` by default.
+- The `deferFilters` method from Filament v3 is now the default behavior in Filament v4, so users must click a button before the filters are applied to the table. To disable this behavior, you can use the `deferFilters(false)` method.
+- The `Grid`, `Section`, and `Fieldset` layout components no longer span all columns by default.
+- The `all` pagination page method is not available for tables by default.
+- All action classes extend `Filament\Actions\Action`. No action classes exist in `Filament\Tables\Actions`.
+- The `Form` & `Infolist` layout components have been moved to `Filament\Schemas\Components`, for example `Grid`, `Section`, `Fieldset`, `Tabs`, `Wizard`, etc.
+- A new `Repeater` component for Forms has been added.
+- Icons now use the `Filament\Support\Icons\Heroicon` Enum by default. Other options are available and documented.
+
+### Organize Component Classes Structure
+- Schema components: `Schemas/Components/`
+- Table columns: `Tables/Columns/`
+- Table filters: `Tables/Filters/`
+- Actions: `Actions/`
 
 
 === laravel/core rules ===
@@ -288,7 +297,7 @@ Forms\Components\Select::make('user_id')
 
 ## Livewire Core
 - Use the `search-docs` tool to find exact version specific documentation for how to write Livewire & Livewire tests.
-- Use the `php artisan make:livewire [Posts\\CreatePost]` artisan command to create new components
+- Use the `php artisan make:livewire [Posts\CreatePost]` artisan command to create new components
 - State should live on the server, with the UI reflecting it.
 - All Livewire requests hit the Laravel backend, they're like regular HTTP requests. Always validate form data, and run authorization checks in Livewire actions.
 
@@ -305,7 +314,7 @@ Forms\Components\Select::make('user_id')
     @endforeach
     ```
 
-- Prefer lifecycle hooks like `mount()`, `updatedFoo()`) for initialization and reactive side effects:
+- Prefer lifecycle hooks like `mount()`, `updatedFoo()` for initialization and reactive side effects:
 
 <code-snippet name="Lifecycle hook examples" lang="php">
     public function mount(User $user) { $this->user = $user; }
@@ -564,11 +573,39 @@ it('has emails', function (string $email) {
 - If existing pages and components support dark mode, new pages and components must support dark mode in a similar way, typically using `dark:`.
 
 
-=== tailwindcss/v3 rules ===
+=== tailwindcss/v4 rules ===
+
+## Tailwind 4
+
+- Always use Tailwind CSS v4 - do not use the deprecated utilities.
+- `corePlugins` is not supported in Tailwind v4.
+- In Tailwind v4, you import Tailwind using a regular CSS `@import` statement, not using the `@tailwind` directives used in v3:
+
+<code-snippet name="Tailwind v4 Import Tailwind Diff" lang="diff">
+   - @tailwind base;
+   - @tailwind components;
+   - @tailwind utilities;
+   + @import "tailwindcss";
+</code-snippet>
+
 
-## Tailwind 3
+### Replaced Utilities
+- Tailwind v4 removed deprecated utilities. Do not use the deprecated option - use the replacement.
+- Opacity values are still numeric.
 
-- Always use Tailwind CSS v3 - verify you're using only classes supported by this version.
+| Deprecated |	Replacement |
+|------------+--------------|
+| bg-opacity-* | bg-black/* |
+| text-opacity-* | text-black/* |
+| border-opacity-* | border-black/* |
+| divide-opacity-* | divide-black/* |
+| ring-opacity-* | ring-black/* |
+| placeholder-opacity-* | placeholder-black/* |
+| flex-shrink-* | shrink-* |
+| flex-grow-* | grow-* |
+| overflow-ellipsis | text-ellipsis |
+| decoration-slice | box-decoration-slice |
+| decoration-clone | box-decoration-clone |
 
 
 === tests rules ===
@@ -577,4 +614,4 @@ it('has emails', function (string $email) {
 
 - Every change must be programmatically tested. Write a new test or update an existing test, then run the affected tests to make sure they pass.
 - Run the minimum number of tests needed to ensure code quality and speed. Use `php artisan test` with a specific filename or filter.
-</laravel-boost-guidelines>
+</laravel-boost-guidelines>

app-modules/gamify/composer.json

@@ -5,11 +5,11 @@
   "version": "1.1.0",
   "license": "proprietary",
   "require": {
-    "php": "^8.3"
+    "php": "^8.4"
   },
   "require-dev": {
-    "pestphp/pest": "^2.32",
-    "pestphp/pest-plugin-laravel": "^2.1"
+    "pestphp/pest": "^3.8",
+    "pestphp/pest-plugin-laravel": "^3.0"
   },
   "autoload": {
     "psr-4": {

app-modules/gamify/src/Models/Reputation.php

@@ -11,7 +11,7 @@
 
 /**
  * @property-read int $id
- * @property int $point
+ * @property-read int $point
  * @property-read User|null $payee
  * @property-read \Illuminate\Support\Carbon $created_at
  * @property-read \Illuminate\Support\Carbon $updated_at
@@ -28,19 +28,11 @@ public function payee(): BelongsTo
         return $this->belongsTo(config('gamify.payee_model'), 'payee_id'); // @phpstan-ignore-line
     }
 
-    /**
-     * Get the owning subject model
-     */
     public function subject(): MorphTo
     {
         return $this->morphTo();
     }
 
-    /**
-     * Undo last point
-     *
-     * @throws \Exception
-     */
     public function undo(): void
     {
         if ($this->exists) {

app/Livewire/Components/Slideovers/ArticleForm.php

@@ -16,6 +16,7 @@
 use Filament\Forms\Components;
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
+use Filament\Infolists\Components\TextEntry;
 use Filament\Notifications\Notification;
 use Filament\Schemas\Components\Grid;
 use Filament\Schemas\Components\Group;
@@ -145,8 +146,9 @@ public function form(Schema $schema): Schema
                             ->minLength(10)
                             ->maxHeight('20.25rem')
                             ->required(),
-                        Components\Placeholder::make('')
-                            ->content(fn (): HtmlString => new HtmlString(Blade::render(<<<'Blade'
+                        TextEntry::make('placeholder')
+                            ->hiddenLabel()
+                            ->state(fn (): HtmlString => new HtmlString(Blade::render(<<<'Blade'
                                 <x-torchlight />
                             Blade))),
                     ])

app/Livewire/Components/Slideovers/DiscussionForm.php

@@ -13,6 +13,7 @@
 use Filament\Forms\Components;
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
+use Filament\Infolists\Components\TextEntry;
 use Filament\Notifications\Notification;
 use Filament\Schemas\Components\Utilities\Set;
 use Filament\Schemas\Schema;
@@ -92,8 +93,9 @@ public function form(Schema $schema): Schema
                     ->maxHeight('18.25rem')
                     ->required()
                     ->minLength(20),
-                Components\Placeholder::make('')
-                    ->content(fn (): HtmlString => new HtmlString(Blade::render(<<<'Blade'
+                TextEntry::make('placeholder')
+                    ->hiddenLabel()
+                    ->state(fn (): HtmlString => new HtmlString(Blade::render(<<<'Blade'
                         <x-torchlight />
                     Blade))),
             ])

app/Livewire/Components/Slideovers/ThreadForm.php

@@ -14,6 +14,7 @@
 use Filament\Forms\Components;
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
+use Filament\Infolists\Components\TextEntry;
 use Filament\Notifications\Notification;
 use Filament\Schemas\Components\Utilities\Set;
 use Filament\Schemas\Schema;
@@ -102,8 +103,9 @@ public function form(Schema $schema): Schema
                     ->label(__('validation.attributes.content'))
                     ->required()
                     ->minLength(20),
-                Components\Placeholder::make('')
-                    ->content(fn (): HtmlString => new HtmlString(Blade::render(<<<'Blade'
+                TextEntry::make('placeholder')
+                    ->hiddenLabel()
+                    ->state(fn (): HtmlString => new HtmlString(Blade::render(<<<'Blade'
                         <x-torchlight />
                     Blade))),
             ])

app/Models/Thread.php

@@ -21,6 +21,7 @@
 use Carbon\Carbon;
 use CyrildeWit\EloquentViewable\Contracts\Viewable;
 use CyrildeWit\EloquentViewable\InteractsWithViews;
+use Database\Factories\ThreadFactory;
 use Exception;
 use Illuminate\Database\Eloquent\Attributes\Scope;
 use Illuminate\Database\Eloquent\Builder;
@@ -59,6 +60,8 @@
 final class Thread extends Model implements Feedable, ReactableInterface, ReplyInterface, SpamReportableContract, SubscribeInterface, Viewable
 {
     use HasAuthor;
+
+    /** @use HasFactory<ThreadFactory> */
     use HasFactory;
     use HasLocaleScope;
     use HasReplies;
@@ -70,7 +73,7 @@ final class Thread extends Model implements Feedable, ReactableInterface, ReplyI
     use Reactable;
     use RecordsActivity;
 
-    public const FEED_PAGE_SIZE = 20;
+    public const int FEED_PAGE_SIZE = 20;
 
     protected $guarded = [];
 

app/Traits/RecordsActivity.php

@@ -50,7 +50,7 @@ protected function recordActivity(string $event, bool $useDefaultEvent = true, a
 
     protected function getActivityType(string $event): string
     {
-        $type = mb_strtolower((new ReflectionClass($this))->getShortName());
+        $type = mb_strtolower(new ReflectionClass($this)->getShortName());
 
         return "{$event}_{$type}";
     }