New tailwindcss classes not bundling in new blade files

Grogu · 2025-03-07T16:17:36.982Z

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!

T

toeknee•3/7/25, 4:20 PM

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

G

GroguOP•3/7/25, 4:22 PM

Thanks @toeknee

G

GroguOP•3/7/25, 4:22 PM

Do you mind elaborating, apologies

T

toeknee•3/7/25, 4:22 PM

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

Themes - Panel Builder - Filament

T

toeknee•3/7/25, 4:23 PM

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

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

G

GroguOP•3/7/25, 7:58 PM

Ahhhh great, thank you @toeknee

T

Thomas van der Westen•3/23/25, 6:59 PM

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

T

Thomas van der Westen•3/23/25, 7:00 PM

T

Thomas van der Westen•3/23/25, 7:00 PM

Any tips?

TThomas van der Westen Click to see attachment

M

Matthew•3/23/25, 7:18 PM

1) The directory

/resources/views/livewire/**/*.blade.php

/resources/views/livewire/**/*.blade.php

/resources/views/livewire/**/*.blade.php

/resources/views/livewire/**/*.blade.php doesnt exist. The file you're reffering to,

resources-calendar.blade.php

resources-calendar.blade.php

resources-calendar.blade.php

resources-calendar.blade.php is under

/resources/views/filament/livewire/**/*.blade.php

/resources/views/filament/livewire/**/*.blade.php

/resources/views/filament/livewire/**/*.blade.php

/resources/views/filament/livewire/**/*.blade.php. For that reason, that line does nothing. The second line,

/resources/views/**/*.blade.php

/resources/views/**/*.blade.php

/resources/views/**/*.blade.php

/resources/views/**/*.blade.php will "scan" the calendar file
2) When you say you restarted, you mean you ran

npm run build/dev

npm run build/dev

npm run build/dev

npm run build/dev?

T

Thomas van der Westen•3/23/25, 7:20 PM

Hmm..
1) Ik have added now

resources/views/livewire/resources-calendar.blade.php

resources/views/livewire/resources-calendar.blade.php

resources/views/livewire/resources-calendar.blade.php

resources/views/livewire/resources-calendar.blade.php
2) Yes I restarted

pm run dev

pm run dev

pm run dev

pm run dev

T

Thomas van der Westen•3/23/25, 7:22 PM

But no

bg-red-500

bg-red-500

bg-red-500

bg-red-500

M

Matthew•3/23/25, 7:23 PM

waitt a second. What is the directory of

tailwind.config.js

tailwind.config.js

?

T

Thomas van der Westen•3/23/25, 7:23 PM

it's in the project root

M

Matthew•3/23/25, 7:23 PM

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

T

Thomas van der Westen•3/23/25, 7:24 PM

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

@config 'tailwind.config.js';

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

@config 'tailwind.config.js';

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

@config 'tailwind.config.js';

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

@config 'tailwind.config.js';

T

Thomas van der Westen•3/23/25, 7:24 PM

This one?

T

Thomas van der Westen•3/23/25, 7:24 PM

oh wait!

T

Thomas van der Westen•3/23/25, 7:25 PM

Bingo!!

T

Thomas van der Westen•3/23/25, 7:25 PM

T

Thomas van der Westen•3/23/25, 7:25 PM

Thanks @Matthew !

TThomas van der Westen This one?

M

Matthew•3/23/25, 7:25 PM

No, its under

resources/css/filament

resources/css/filament

resources/css/filament

resources/css/filament

TThomas van der Westen Thanks @Matthew !

M

Matthew•3/23/25, 7:25 PM

Nicee, you're welcome