I have a fresh install of Sage 10 per the Docs. I’m trying to wrap my head around the workflow.
When I run yarn dev, I get no errors and although it takes a couple of minutes to compile, it reports “watching project sources (and 25 other files)”. Am I correct that browser-sync should be running at this point? When I make changes to any of the template files in resources, my browser is not refreshed.
When yarn dev is (supposedly) running, if I change a CSS class, in page.blade.php, for example, to some standard tailwind.css class that wasn’t present during compile, the displayed styling will return to default (black text or white background), even if that class exists in the app.xxxxx.css file in public/css. When I stop and then re-start yarn dev, the new classes are updated.
I’m coming from a standard Sass/Gulp environment, so I might just be missing something obvious in how Tailwind works.
Where are those source files? WSL? Mac OS? Linux? In a VM? This is relevant, as crossing different file systems can cause issues with watching file changes.
Does anyone have any ideas where I might look to toubleshoot this issue?
I’m running WSL from the mounted root of the theme directory. When I run yarn dev, this is my output:
I’m guessing this is related to file watch on a mounted volume in WSL 1 – which seems kind of broken, to me.
I would probably upgrade to WSL2 which doesn’t seem to suffer this. But, in the context of WSL1 you can turn on polling to strong arm changes changes into being recognized:
Depending on the number of files being watched it can start to overwhelm container resources, so you may need to adjust the polling interval as you go (expressed in ms):