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•2w ago

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

ddoddsr•2w 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•2w ago

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

ddoddsr•2w ago

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

LeandroFerreira•2w ago

I think the issue is the path in content..

Dennis Koch•2w ago

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

ddoddsr•2w 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•2w ago

what is the output from run dev?

ddoddsr•2w 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•2w ago

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

ddoddsr•2w 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•2w ago

Any errors in DevTools?

ddoddsr•2w 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•2w ago

Are you using an Adblocker?

ddoddsr•2w ago

BrveBrowser!

Gaming

Programming

npm run build error, run dev not working