Error when creating custom Filament theme

[KozSuper]

Package

filament/filament

Package Version

v3.2

Laravel Version

v12.0

Livewire Version

v3.0

PHP Version

PHP 8.2.0

Problem description

I am trying to create a custom Filament theme, but when I run the command "php artisan make:filament-theme", tried in both environments (Local and Replit)
I have followed all the instructions, but I still get an error.

Use the second method.

//AdminPanelProvider.php
return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => Color::Amber,
            ])
            ->theme(asset('css/filament/admin/theme.css'))

~/workspace$ php artisan make:filament-theme

   INFO  Filament theme [resources/css/filament/admin/theme.css] and [resources/css/filament/admin/tailwind.config.js] created successfully.  

   WARN  Action is required to complete the theme setup:  

  ⇂ It looks like you have Tailwind v4 installed. Filament uses Tailwind v3. You should downgrade your project and re-run this command with `--force`, or use the following command to compile the theme with the Tailwind v3 CLI  
  ⇂ npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify  
  ⇂ Make sure to register the theme in the admin panel provider using `->theme(asset('css/filament/admin/theme.css'))`  
~/workspace$ npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify
Need to install the following packages:
tailwindcss@3.4.17
Ok to proceed? (y) y

Error: Failed to find 'tailwindcss/base'
  in [
    /home/runner/workspace/vendor/filament/filament/resources/css
  ]
    at /home/runner/.npm/_npx/20926d80ef4f8eb9/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async LazyResult.runAsync (/home/runner/.npm/_npx/20926d80ef4f8eb9/node_modules/postcss/lib/lazy-result.js:293:11)
    at async build (/home/runner/.npm/_npx/20926d80ef4f8eb9/node_modules/tailwindcss/lib/cli/build/index.js:49:9)
~/workspace$ ^C

Use the first method.

after reinstall tailwindcss to 3.4.17

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite"
    },
    "devDependencies": {
        "@tailwindcss/vite": "^4.0.0",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.2.0",
        "tailwindcss": "^3.4.17",
        "vite": "^6.0.11"
    }
}

//AdminPanelProvider.php
return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => Color::Amber,
            ])
            ->viteTheme('resources/css/filament/admin/theme.css')

~/workspace$ npm install

added 94 packages, changed 1 package, and audited 172 packages in 4s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
~/workspace$ php artisan make:filament-theme --force
Using npm v10.8.2

   INFO  Filament theme [resources/css/filament/admin/theme.css] and [resources/css/filament/admin/tailwind.config.js] created successfully.  

   INFO  Filament theme [postcss.config.js] created successfully.  

   WARN  Action is required to complete the theme setup:  

  ⇂ First, add a new item to the `input` array of `vite.config.js`: `resources/css/filament/admin/theme.css`  
  ⇂ Next, register the theme in the admin panel provider using `->viteTheme('resources/css/filament/admin/theme.css')`  
  ⇂ Finally, run `npm run build` to compile the theme  
~/workspace$ ^C
~/workspace$ npm run build

> build
> vite build

vite v6.2.0 building for production...
✓ 0 modules transformed.
✗ Build failed in 361ms
error during build:
[@tailwindcss/vite:generate:build] Can't resolve 'tailwindcss' in '/home/runner/workspace/resources/css'
file: /home/runner/workspace/resources/css/app.css
    at finishWithoutResolve (/home/runner/workspace/node_modules/enhanced-resolve/lib/Resolver.js:564:18)
    at /home/runner/workspace/node_modules/enhanced-resolve/lib/Resolver.js:656:15
    at /home/runner/workspace/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/home/runner/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/runner/workspace/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/home/runner/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/runner/workspace/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:89:43
    at /home/runner/workspace/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/home/runner/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/runner/workspace/node_modules/enhanced-resolve/lib/Resolver.js:718:5

Expected behavior

build a custom theme.

Steps to reproduce

Create new laravel project

composer require filament/filament:"^3.2" -W
php artisan filament:install --panels
php artisan make:filament-theme

Reproduction repository (issue will be closed if this is not valid)

https://github.com/KozSuper/lara1

Relevant log output

[danharrin]

I am updating the documentation now

Change your theme CSS file to this:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@import '../../../../vendor/filament/filament/resources/css/base.css';

@config 'tailwind.config.js';

And run npm install @tailwindcss/forms @tailwindcss/typography --save-dev

Then, npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify should work correctly even if you have Tailwind 4 installed.

[ArtMin96]

I have the following problem: Can't resolve 'tailwind.config.js' in '/var/www/html/resources/css/filament/admin'

sail artisan make:filament-theme admin

input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],

theme.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@import '../../../../vendor/filament/filament/resources/css/base.css';

@config 'tailwind.config.js';

AdminPanelProvider.php

->viteTheme('resources/css/filament/admin/theme.css')

I have tailwind.config.js file on resources/css/filament/admin dir

resources/css/filament/admin/tailwind.config.js

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

[KozSuper]

I have the following problem: Can't resolve 'tailwind.config.js' in '/var/www/html/resources/css/filament/admin'

sail artisan make:filament-theme admin

input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
theme.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@import '../../../../vendor/filament/filament/resources/css/base.css';

@config 'tailwind.config.js';
AdminPanelProvider.php

->viteTheme('resources/css/filament/admin/theme.css')
I have tailwind.config.js file on resources/css/filament/admin dir

resources/css/filament/admin/tailwind.config.js

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
presets: [preset],
content: [
'./app/Filament//*.php',
'./resources/views/filament//.blade.php',
'./vendor/filament/**/.blade.php',
],
}

delete folder "/resources/css/filament/admin"

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
});

package.json (remove @tailwindcss/vite)

    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.10",
        "@tailwindcss/typography": "^0.5.16",
        "autoprefixer": "^10.4.21",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.2.0",
        "postcss": "^8.5.3",
        "postcss-nesting": "^13.0.1",
        "tailwindcss": "^3.4.17",
        "vite": "^6.0.11"
    }
}

and try again artisan make:filament-theme admin

[zepfietje]

In case anyone is still unable to get things to work, I just wrote a guide on an alternative approach that should have less issues: https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4

Just reply on here if you have any questions. 😊

[ubeydullah26]

In case anyone is still unable to get things to work, I just wrote a guide on an alternative approach that should have less issues: https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4

Just reply on here if you have any questions. 😊

I applied what you mentioned, but when I try to access the /admin route, I get this error:

[plugin:@tailwindcss/vite:generate:serve] Can't resolve 'index.css' in 'C:\Users[username]\OneDrive\Desktop\code\appointment\vendor\filament\filament\resources\css'

Any idea what might be causing this issue?

[fsavina]

In case anyone is still unable to get things to work, I just wrote a guide on an alternative approach that should have less issues: https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4
Just reply on here if you have any questions. 😊

I applied what you mentioned, but when I try to access the /admin route, I get this error:

[plugin:@tailwindcss/vite:generate:serve] Can't resolve 'index.css' in 'C:\Users[username]\OneDrive\Desktop\code\appointment\vendor\filament\filament\resources\css'

Any idea what might be causing this issue?

Same here

[Ankanis]

In case anyone is still unable to get things to work, I just wrote a guide on an alternative approach that should have less issues: https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4
Just reply on here if you have any questions. 😊

I applied what you mentioned, but when I try to access the /admin route, I get this error:

[plugin:@tailwindcss/vite:generate:serve] Can't resolve 'index.css' in 'C:\Users[username]\OneDrive\Desktop\code\appointment\vendor\filament\filament\resources\css'

Any idea what might be causing this issue?

same

[cardentey]

In case anyone is still unable to get things to work, I just wrote a guide on an alternative approach that should have less issues: https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4
Just reply on here if you have any questions. 😊

I applied what you mentioned, but when I try to access the /admin route, I get this error:
[plugin:@tailwindcss/vite:generate:serve] Can't resolve 'index.css' in 'C:\Users[username]\OneDrive\Desktop\code\appointment\vendor\filament\filament\resources\css'
Any idea what might be causing this issue?

same

same :-(

[fredikaputra]

I have the following problem: Can't resolve 'tailwind.config.js' in '/var/www/html/resources/css/filament/admin'

sail artisan make:filament-theme admin

input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
theme.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@import '../../../../vendor/filament/filament/resources/css/base.css';
@config 'tailwind.config.js';
AdminPanelProvider.php
->viteTheme('resources/css/filament/admin/theme.css')
I have tailwind.config.js file on resources/css/filament/admin dir
resources/css/filament/admin/tailwind.config.js
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
export default {
presets: [preset],
content: [
'./app/Filament//*.php',
'./resources/views/filament//.blade.php',
'./vendor/filament/**/.blade.php',
],
}

delete folder "/resources/css/filament/admin"

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
});

package.json (remove @tailwindcss/vite)

    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.10",
        "@tailwindcss/typography": "^0.5.16",
        "autoprefixer": "^10.4.21",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.2.0",
        "postcss": "^8.5.3",
        "postcss-nesting": "^13.0.1",
        "tailwindcss": "^3.4.17",
        "vite": "^6.0.11"
    }
}

and try again artisan make:filament-theme admin

Fixing the issue by ditching @tailwindcss/vite and removing tailwindcss() from vite.config.js.