npm run build error, run dev not working

Followed the directions I made a new theme

php artisan make:filament-theme admin

php artisan make:filament-theme admin

Followed these steps

  ⇂ 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

  ⇂ 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

Run build does include my custom page and the tailwind class take effect! great. But I get a warning that does not make sense:

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

Also npm run dev does NOT effect my custom page changes Gist of files https://gist.github.com/ddoddsr/f777762adb35c1908546ce98a1d1e3b5

Gist

Missing content warning and npm run dev does not process changes

Missing content warning and npm run dev does not process changes - postcss.config.js

Solution:

Are you using an Adblocker?

Jump to solution

17 Replies

LeandroFerreira•3mo ago

they are warns. Just remove app.css from vite.config.js Is your page inside resources/views/filament/pages ?

ddoddsrOP•3mo ago

Commented out the app.css, no more warning. Thanks1. But the

npm run dev

npm run dev

does work NOT so it makes for a painful dev env. Page in

resources/views/filament/resources/client-resource/pages/launch-to-date.blade.php

resources/views/filament/resources/client-resource/pages/launch-to-date.blade.php

LeandroFerreira•3mo ago

add in the tailwind.config.js content './resources/views/filament/resources/client-resource/**/*.blade.php'

ddoddsrOP•3mo ago

I tried your suggestion but thought './resources/views/filament/**/*.blade.php', would do it, Still no update via npm run dev.

LeandroFerreira•3mo ago

I think the issue is the path in content..

Dennis Koch•3mo ago

Should do it. Did you add the ->viteTheme() to the. PanelProvider?

ddoddsrOP•3mo ago

npm run build works with or with out the extra line in the content. the npm run dev does not work with either.

LeandroFerreira•3mo ago

what is the output from run dev?

ddoddsrOP•3mo ago

Yes I did add '->viteTheme('resources/css/filament/admin/theme.css')' exactly as instructed after running php artisan make:filament-theme admin I added 'resources/views/filament/**/*.blade.php' to the vite.config , and now npm run dev runs on change. Not in the docs but I should have known.. thanks @Leandro Ferreira , @Dennis Koch for the assist!

Dennis Koch•3mo ago

Didn't you say yesterday, that it didn't work?! 🤔

ddoddsrOP•3mo ago

Yes it did not work when I put it in the wrong file. Thanks for the note. As I said, I should have known, thanks for the assist I am again lost in the woods. npm run build works, BUT npm run dev just sits there and I get a unstyled mess on all pages. from 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',
    ],
}

 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',
    ],
}

. and from 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,
        }),
    ],
});

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,
        }),
    ],
});

. I am using valet if that makes a difference

Dennis Koch•3mo ago

Any errors in DevTools?

ddoddsrOP•3mo ago

YEs this

127.0.0.1:5173/resources/css/filament/admin/theme.css:1        
        
       Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

new to me.

Solution

Dennis Koch•3mo ago

Are you using an Adblocker?

ddoddsrOP•3mo ago

BrveBrowser!

Dennis Koch•3mo ago

So probably yes. Disable it for you dev page

ddoddsrOP•3mo ago

Yes it works in plain Chrome. A upgrade of Brave lost that config... thanks so much

Gaming

Programming

npm run build error, run dev not working