Content changes not detected in SvelteKit when using globs on Windows

[saym97]

What version of Tailwind CSS are you using?
v3.0.23

What build tool (or framework if it abstracts the build tool) are you using?
"postcss": "^8.4.6",

What version of Node.js are you using?
node 16.13.0 and also tried it with 14

What browser are you using?
Firefox, also tried on Microsoft Edge

What operating system are you using?
Windows

Reproduction URL
https://github.com/saym97/portal-exp
this is base sveltekit project with Tailwind 3.0 . if you run 'npm run dev' the correct style classes will be applied to tag classes in routes/index.svelte but try changing the bg-color to some other color, it won't change unless you restart the server.

Describe your issue
I wanted to update my current project to Tailwind 3.0 . I am using Sveltekit for my project. I followed the Tailwind Labs youtube guide to update. It updated successfully (because I could use shadow-color class after that). but every time I make changes to class of an element it just doesn't update the style. It doesn't generate the newly added class. I have to 'npm run dev' every time I make changes. I also tried adding the 'watch:css' with 'npm run dev' thinking may be tailwind is not tracking changes unless I explicitly run --watch alongside 'run dev' but no luck.
**But I did found out that if I run both the --watch and dev command to start server, it tells me that my Content field in tailwind config.cjs is empty or missing but it's not! if there was something wrong with content field then it wouldn't generate classes at all even after restarting the server . **
module.exports = { content: ['./src/**/*.{html,js,svelte,ts}'], theme: { extend: {}, }, plugins: [], }

[adamwathan]

Hey! Can you please include a reproduction?

[saym97]

I have edited the description of my issue and included the reproduction repo. I hope this explain the problem . Thank you !!

[thecrypticace]

I'm testing this on a windows machine and the only way I can get it to fail is if I'm using WSL. This is because filesystem events are not delivered from windows to the WSL2 virtual machine. Are you by chance using WSL for your projects?

[thecrypticace]

After a bit more testing:

• Using Windows directly works fine for me
• WSL2 only works when the files are not located on the C drive in Windows but in the WSL2 VM directly.

More specifically, for me, it works:

1. On Windows directly with a local vscode window (the default) to edit the files
2. On WSL2 with a remote WSL2 window for VSCode when in any directory that is NOT inside /mnt/c

It doesn't work in the following cases:

1. On WSL2 and using a local vscode window (the default)
2. On WSL2 with a remote window when the files are located anywhere under /mnt/c

[thecrypticace]

If you are using WSL you can configure Vite internally to use polling and it should fix any issues:

const config = {
  kit: {
    adapter: adapter(),

    vite: () => ({
      server: {
        watch: {
          usePolling: true,
        }
      }
    }),
  }
}

[saym97]

I am also using the windows , no VM . Could you please link a working Sveltekit repo with tailwind so I can try it on my machine too. I know if it's working on your machine then it means this is becoming an individual issue (mine) rather than Tailwind's . but could you please link a working repo. Thank you!!
Also could you tell me what node version you used for testing?

[thecrypticace]

I cloned the repo you provided and was testing with that.

• Windows 11
• Node v16.x
• NPM v8.x

Out of curiosity does the polling solution I provided work for you? It's not ideal but might fix your problem.

[saym97]

I have tried with the polling solution as well but it still doesn't work.

[saym97]

I think I might have found what the problem is but don't know the solution. In content field of config file. I replaced content: ['./src/**/*.{html,js,svelte,ts}'], with just one file for now content: ['./src/routes/index.svelte'], and it worked perfectly , generated new classes on save.
So the problem on my side I assume is that it cannot make send sense of path patterns . If this means I have to add every new file in the content array then Oh well... it is temporary fixed that I have to do. I love tailwind and I don't wanna go for other frameworks.

P.S : I also have tried using glob pattern for each file extension like content: ["./src/**/*.svelte", "./src/**/*.js"], but no luck . So the only option for me, for now, is to include every relevant file.

[thecrypticace]

That's very strange. What's the full path to the root of your project in Windows? It seems that globs aren't working but that's not something we control but could be worth filing a bug.

[thecrypticace]

Also any chance you're accessing the path via a UNC path?

It'd look kinda like one of these:

\\.\C:\Test
\\?\C:\Test
\\.\Volume{b75e2c83-0000-0000-0000-602f00000000}\Test
\\?\Volume{b75e2c83-0000-0000-0000-602f00000000}\Test

[saym97]

Ok it's working now .
My previous path to project was D:\Personal Side Projects (Mix)\portal-ui and when you mentioned that globs might not be working with the full path, I tried changing the folder name to D:\Personal-Side-Projects\portal-ui removing the () parenthesis worked ! it now makes sense of glob patterns. ! O my God !! Thank you @thecrypticace !
I have just one question. Is it a bug or I was naming my folder wrong and I should never put space in and parenthesis in project folder names?

[thecrypticace]

I wouldn't expect either of those to be a problem but I've had issues in other tools with Windows and paths having spaces in them. This is good info! I'll see what I can figure out.

[saym97]

Thank you again for replying to me consistently and helping all the way.

[thecrypticace]

For my (or others) future reference in debugging this later:

1. The globs are resolved correctly in Tailwind CSS internally.
2. Dependencies are being pushed through PostCSS as expected.
3. You must have one or more opening parens in the path to break it. Spaces don't affect the behavior. For example, this path breaks: C:\Test(Test\portal-exp
4. It works when not using globs. This is because the normal dependency message is used with a fully resolved path instead of dir-dependency with a glob.
5. Config changes do trigger a rebuild since it also uses a normal dependency message.

[thecrypticace]

Tracked it down and opened a PR with Vite: vitejs/vite#7081

[adamwathan]

What a rollercoaster! I'm going to close this since the issue is upstream, but at least there's a workaround and hopefully the fix will be merged and released there at some point in the near future.

[ThePeterMick]

Leaving this here in case Google takes someone else here too, I'm on a Mac and had a similar issue of changes not being picked up when using glob patterns:

Updating my postcss-cli from v8 to "postcss-cli": "^9.1.0" has resolved the issues for me 🎉