Filament•3mo ago

New tailwindcss classes not bundling in new blade files

Wondering what I'm doing wrong. I have composer dev / npm run dev running, and created a new file: resources/views/livewire/application-nav.blade.php Added hover:text-blue-500 to an element in the new file, restarted the bundlers, but that class is never being generated in the bundled css file and therefore the text is not turning blue on hover. Any help appreciated!

Solution:

to include new classes you need to build a custom theme first

Jump to solution

18 Replies

Solution

toeknee•3mo ago

to include new classes you need to build a custom theme first

toeknee•3mo ago

it's fairly simple process, then you can ensure the resources dir is being include in the tailwind build

GroguOP•3mo ago

Thanks @toeknee Do you mind elaborating, apologies

toeknee•3mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

toeknee•3mo ago

Then in the tailwind.config.js for that theme you will have the likes of

    content: [
        './app/Filament/**/*.php',
        './app/Filament/Vessel/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/filament/vessel/**/*.blade.php',
        './resources/views/filament/pages/*.blade.php',
        './resources/views/filament/pages/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './app/Filament/**/*.php',
    ],

    content: [
        './app/Filament/**/*.php',
        './app/Filament/Vessel/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/filament/vessel/**/*.blade.php',
        './resources/views/filament/pages/*.blade.php',
        './resources/views/filament/pages/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './app/Filament/**/*.php',
    ],

GroguOP•3mo ago

Ahhhh great, thank you @toeknee 🙏

Thomas van der Westen•2mo ago

I have the same problem. I added a custom theme and a new content directory, and then I restarted Vite.

Thomas van der Westen•2mo ago

Thomas van der Westen•2mo ago

Any tips?

Matthew•2mo ago

1) The directory /resources/views/livewire/**/*.blade.php doesnt exist. The file you're reffering to, resources-calendar.blade.php is under /resources/views/filament/livewire/**/*.blade.php. For that reason, that line does nothing. The second line, /resources/views/**/*.blade.php will "scan" the calendar file 2) When you say you restarted, you mean you ran npm run build/dev?

Thomas van der Westen•2mo ago

Hmm.. 1) Ik have added now resources/views/livewire/resources-calendar.blade.php 2) Yes I restarted pm run dev But no bg-red-500

Matthew•2mo ago

waitt a second. What is the directory of tailwind.config.js?

Thomas van der Westen•2mo ago

it's in the project root

Matthew•2mo ago

wrong tailwind config. Try using the one that is in your theme

Thomas van der Westen•2mo ago

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

This one? oh wait! Bingo!!

Thomas van der Westen•2mo ago

Thanks @Matthew !

Matthew•2mo ago

No, its under resources/css/filament Nicee, you're welcome

Gaming

Programming

New tailwindcss classes not bundling in new blade files

Did you find this page helpful?