Filament•3mo ago

Minimal Theme vite error

I've followed all the steps in the minimal-theme tutorial to make it work with TailwindCSS v4 but ... if i 'npm serve' it works on the main page but as soon as i switch to filement it crashes with:

php 
Can't resolve '/vendor/filament/minimal-theme/resources/css' in '/Users/cem/Web/indiedevs/resources/css/filament/admin'

php 
Can't resolve '/vendor/filament/minimal-theme/resources/css' in '/Users/cem/Web/indiedevs/resources/css/filament/admin'

my vite.config.filament.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
    css: {
        postcss: {
            plugins: [
                tailwindcss(),
                autoprefixer(),
            ],
        },
    },
    build: {
        outDir: 'public/build/filament',
    },
});

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
    css: {
        postcss: {
            plugins: [
                tailwindcss(),
                autoprefixer(),
            ],
        },
    },
    build: {
        outDir: 'public/build/filament',
    },
});

vite.config.js

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), tailwindcss(), ], });

and my package.json

and my package.json

js "scripts": { "build": "vite build && vite build --config vite.config.filament.js", "dev": "concurrently "vite" "vite --config vite.config.filament.js"" }, ```

5 Replies

Dennis Koch•3mo ago

@Zep Fietje

Zep Fietje•3mo ago

Thanks for tagging me, @Dennis Koch! (@Cem be sure to just email me when you want direct support. I'm not notified here on Discord unfortunately) The issue you're describing is a known limitation. Would it work for you to separate the npm dev and build commands into two commands, one for Filament and one for your app, @Cem?

CemOP•3mo ago

@Zep Fietje woops sorry forgot the mail thing Yes (not sure how you'd do it but yes !) 😉

Zep Fietje•3mo ago

"build:app": "vite build",
"build:filament": "vite build --config vite.config.filament.js",
"dev:app": "vite",
"dev:filament": "vite --config vite.config.filament.js"

"build:app": "vite build",
"build:filament": "vite build --config vite.config.filament.js",
"dev:app": "vite",
"dev:filament": "vite --config vite.config.filament.js"

Try that If I didn't make any typos, that should work Else feel free to email me 🙂

CemOP•3mo ago

@Zep Fietje nope .. didn't work. I've emailed you 😉

Gaming

Programming

Minimal Theme vite error

Did you find this page helpful?