Tweak theming process for Tailwind v4

filamentphp · Mar 5, 2025 · 7f9def9 · 7f9def9
1 parent 298d462
commit 7f9def9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/packages/panels/src/Commands/MakeThemeCommand.php b/packages/panels/src/Commands/MakeThemeCommand.php
@@ -27,28 +27,32 @@ public function handle(): int
 
         $isTailwindV4Installed = str_contains($packageJson, '"@tailwindcss/postcss": "^4')
             || str_contains($packageJson, '"@tailwindcss/postcss": "4')
+            || str_contains($packageJson, '"@tailwindcss/vite": "^4')
+            || str_contains($packageJson, '"@tailwindcss/vite": "4')
             || str_contains($packageJson, '"tailwindcss": "^4')
             || str_contains($packageJson, '"tailwindcss": "4');
 
-        if (! $isTailwindV4Installed) {
-            $pm = $this->option('pm') ?? 'npm';
+        $pm = $this->option('pm') ?? 'npm';
 
-            exec("{$pm} -v", $pmVersion, $pmVersionExistCode);
+        exec("{$pm} -v", $pmVersion, $pmVersionExistCode);
 
-            if ($pmVersionExistCode !== 0) {
-                $this->error('Node.js is not installed. Please install before continuing.');
+        if ($pmVersionExistCode !== 0) {
+            $this->error('Node.js is not installed. Please install before continuing.');
 
-                return static::FAILURE;
-            }
+            return static::FAILURE;
+        }
 
-            $this->info("Using {$pm} v{$pmVersion[0]}");
+        $this->info("Using {$pm} v{$pmVersion[0]}");
 
-            $installCommand = match ($pm) {
-                'yarn' => 'yarn add',
-                default => "{$pm} install",
-            };
+        $installCommand = match ($pm) {
+            'yarn' => 'yarn add',
+            default => "{$pm} install",
+        };
 
+        if (! $isTailwindV4Installed) {
             exec("{$installCommand} tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev");
+        } else {
+            exec("{$installCommand} @tailwindcss/forms @tailwindcss/typography --save-dev");
         }
 
         $panel = $this->argument('panel');
@@ -92,7 +96,7 @@ public function handle(): int
             ->map(fn ($segment) => Str::lower(Str::kebab($segment)))
             ->implode('/');
 
-        $this->copyStubToApp('ThemeCss', $cssFilePath, [
+        $this->copyStubToApp($isTailwindV4Installed ? 'ThemeCssTailwind4' : 'ThemeCss', $cssFilePath, [
             'panel' => $panelId,
         ]);
         $this->copyStubToApp('ThemeTailwindConfig', $tailwindConfigFilePath, [

diff --git a/packages/panels/stubs/ThemeCssTailwind4.stub b/packages/panels/stubs/ThemeCssTailwind4.stub
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+@import '../../../../vendor/filament/filament/resources/css/base.css';
+
+@config 'tailwind.config.js';