Hello all,
I am currently trying to build a custom theme for my blog. Since I am an avid TailwindCSS user, I decided it’d be best to go with it in this case as well. However, so far I’ve only used it with frameworks like Next JS where the setup experience was much more seamless.
I am currently working on a local development instance which I installed with ghost install local. My theme boilerplate is in the content/themes directory and activated. I used the asset helper to link my stylesheet with the TailwindCSS styles.
I used the gulpfile from TryGhost/casper as a starting point and changed the configuration to support tailwindCSS with Post CSS. The generation of the new classes with the just in time engine works perfectly fine. My CSS build task is triggered with any change in a *.hbs file. The output CSS file always contains all the necessary classes. However, Ghost keeps serving an older, apparently cached, version of the stylesheet. This goes until I completely restart, which is obviously a rather suboptimal developer experience.
According to the documentation, caching is disabled with the local installation. The docs also mention that adding new files to the theme requires restarting ghost, but this does not happen since the file in the assets/built directory is always overwritten.
Am I missing something with my setup? Are there any workarounds I could take?
Packages used:
- Ghost: 4.33
- Tailwind: 3.0.15
- PostCSS: 8.4.5
- Gulp-postcss: 9.0.1
OS: macOS Monterey
Node: 16.13
Thank you all in advance
Edit: I did some more research and found a lot more forum posts complaining about exactly this issue. The only two solutions that were mentioned were taking the Casper theme as a starting point or reading this blog post which does not exist anymore. Given that the Casper theme was provided as a reference multiple times, I tried using the gulp development pipeline in the Casper theme that came with my ghost installation. However, it still shows the same behaviour as my own gulpfile, requiring a complete restart of the local ghost instance.
Edit 2: It seems like I have it working now. Maybe my monolog will help somebody at a later point- Almost as expected, the source of the problem was sitting in front of the screen all along. I forgot do disable the cache of my browser, so the problem was not on Ghosts side.
Behavior is completely fixed when using Inspect Element → Go to network Tab → Click disable cache