Laravel 9 Vite not updating tailwind changes

@Snapey Any other suggestions? As i mention below i do keep the command running.

@Snapey I don't see any activity in the vite window when i update & save a blade file.

@Snapey Any suggestions to try and fix this?

@bljdavidson I reviewed my files and tested this with the original laravel welcome page.

If i add the path './resources/**/*.blade.php' to the tailwind config, the welcome.blade page updates as it should.

The problem is that my blade view files are in another location: './app/Directory/Directory/Resources/views/Directory/*.blade.php' with many different Directories like this: ./app/Directory/xxx/Resources/views/xxx/*.blade.php

How do i add this to the tailwind config file?

Currently i added, as with the previous mix plugin, ./app/Directory/**/*.blade.php' but that doesn't seem to work for vite.

My current tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './app/Directory/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.blade.php',
    ],
    darkMode: 'media',
    theme: {
        extend: {
        },
    },
    plugins: [],
}

@bljdavidson nvm, i found my mistake.

i have to add this to the tailwind config: './app/**/*.blade.php'

Not entirely sure why it doesn't allow './app/Directory/**/*.blade.php'

@Therin Ah Vite will only work with one nested directory; any more, it will unfortunately break.

So ./app/nested/*.blade.php will work. However ./app/nested/nested/*.blade.php won't work. It's the same when using React or Vue with dynamic imports.

I hope that helps. If my comment has helped, please could you mark it as the best answer so it can help others :)

@bljdavidson so you are saying the official setup for Jetstream is wrong as it has nested directories in the tailwind config https://github.com/laravel/jetstream/blob/2.x/stubs/inertia/tailwind.config.js#L9

That is news to me :) and I assume you mean that this is problem with tailwind, not vite?

@Therin why do you have blade files inside your app directory? And is the folder just named Directory? Can you give the actual name if it isn't so people can replicate it?

'./app/Directory/**/*.blade.php',

@Sinnbeck I have blade files inside my app directory because, as i'm still on this learning journey (only been learning since 6-10 months ago), i am trying out different things. So for my new "project" i am trying to incorporate "modules"?.

For example my current project will have several modules that can be set to active or inactive and it will run or drop migrations, register a service provider if active, etc. Some modules are like a ticketing system, inventory management, asset management, etc ...

So my folder structure is actually more like this, where it concerns the blade files:

./app/Project/Tickets/Resources/views/tickets/*.blade.php
./app/Project/Inventory/Resources/views/inventory/*.blade.php

So a lot of different directories, which represent the modules, with deeper nested blade files.

So when i added

./app/Project/**/*.blade.php

to the tailwind.config.js file, thinking it would cover all nested locations starting from ./app/Project/ it didn't seem to work. It only started working once i omitted the /Project/ part so it looked like above ./app/**/*.blade.php

@Therin ok that's interesting. It should work with that path. I wonder if it is having problems due to the casing of Project. Are you on windows?

@Sinnbeck Not sure which part you find interesting :)

I had other "projects" with similar directory structures when Laravel installations were still using Mix and running the npm run watch command, so i thought it would be the same when a newly installed project came with Vite.

I am on Windows yes, not running anything like Homestead, i am just using the php artisan serve function to run the projects.

@Therin it's interesting that I haven't seen anything like this before. I have helped quite alot of people with both vite and tailwind, and you are the first one with this problem. I will do some thinking/testing

@Therin just noticed that all of your folders has an s at the end. Any chance that the folder is named Projects not Project?

@Sinnbeck I based my answer off https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#globs-only-go-one-level-deep

Maybe it's different with PostCSS? Perhaps it's just a coincidence, haha.

@Sinnbeck Not all of them have an s at the end (well 90% do, but still).

I am following the directory structure that somewhat resembles the normal Laravel structure. Normally blade files are stored in './resources/views' so it follows that, which is also showcased where i first read about a modular approach: https://nwidart.com/laravel-modules/v6/introduction

So './app/Project' is the only constant (and without an s at the end) where all the modules are bundled, the other subdirectories are just the different modules, each with their own directory structured as in the page i linked.

@bljdavidson yeah that's interesting indeed. But I have way deeper nesting and have had zero issue. But good find :)

@Therin ok cool. I hope to be able to test it out later myself

Sorry for the delay. I just created a brand new project, and make a structure like yours in my app directory. I added a view and gave it some classes. I then compiled with npm run build and checked the css file it output. And the classes was in there as expected. So sadly I cannot recreate the problem

@Sinnbeck I think i may have found the issue (a silly oversight of myself perhaps), but it's specific to the command npm run dev.

Directory structure is indeed the way i've been writing it here with the uppercase letter:

app/Project/

If i write the directory all in lowercase within tailwind.config.js:

app/project/**/*.blade.php

Then the command npm run dev will 'build' once but offer no further updates when i save a blade file.

The command npm run build will 'build' everything correctly (as far as i can tell, every npm run build i run after a blade file save when adjusting classes seems to update correctly in the browser).

If i write the directory as it is within tailwind.config.js (so uppercase):

app/Project/**/*.blade.php

Then the command npm run dev will 'build' once and will show subsequent update info in the terminal window on every blade save.

So my silly oversight was that i typed it in lowercase in one project, which didn't seem to be an issue for Mix when that was used in other projects.