Styles not applying on front-end
Closed this issue · 3 comments
Hello,
I have generated a theme and added it in the /themes folder. I follow your installation details and run npm install & npm run dev without any issues with node 18.17.1.
I then use npm run watch and also added npm install browser-sync --save-dev.
I am using WSL with a Wordpress Docker image.
My problem is that when I apply the Tailwind classes in *.php files it doesn't work on the frontend. When I check the style.css has the CSS styles been added so it watches and generate which Tailwind classes that should go into the style.css atleast.
Have I missed something in the configuration? 😊
Images
Hello—Thanks for posting this issue!
You said that:
When I check the style.css has the CSS styles been added so it watches and generate which Tailwind classes that should go into the style.css at least.
Does that mean that in style.css, you're seeing a selector for .bg-black?
If so, is it possible your browser is caching the older version of the style.css file, prior to those styles having been added?
Hello—Thanks for posting this issue!
You said that:
When I check the style.css has the CSS styles been added so it watches and generate which Tailwind classes that should go into the style.css at least.
Does that mean that in
style.css, you're seeing a selector for.bg-black?If so, is it possible your browser is caching the older version of the
style.cssfile, prior to those styles having been added?
I believe it must have been some form of browser problem because a day after it "started to work" again. So maybe it had to do something with the caching of the old style.css. When a new style.css is enqueued, does it get a new assetVersion everytime it's built? 😊
That's great, thanks for letting me know!
When a new style.css is enqueued, does it get a new assetVersion everytime it's built? 😊
When you run npm run bundle, the bundled version (created as a zip file) always gets a new asset version. If you're deploying via a different method, you'll need to keep the asset version updated by changing this line, either manually or as part of your deployment process:
Line 18 in 55a0316
During development (npm run watch, probably), the asset version is not updated. You'll need to disable caching if you want to ensure you see all changes. (Browser developer tools typically have an option to disable them, which is how I work in development.)
I'm going to close this issue, but please let me know if you have any other questions!