Configure Tailwind to rebuild on template change
We introduced Tailwind to the project in !26 (merged).
The tailwind.css bundle is created when compiling with Hugo (make view
locally, or hugo
in production). It is dynamically generated so that it only contains classes used in our templates.
This works great for production, but the bundle does not get rebuilt during development when templates change. This makes the frontend workflow something like:
- add a utility class to a template
- if the class has been used before, it takes effect immediately on livereload
- if the class has not been used before, nothing happens because the class does not exist in tailwind.css
You need to restart the dev server to regenerate the bundle. This is a little unexpected and lessens the benefits of having livereload in the dev environment.
How can we rebuild the tailwind file when:
- a template is updated
- a Vue file is updated (these also contain templates) (we don't actually have any Vue on the project yet, but we will)
This might require watching tailwind outside of Hugo, as discussed in !26 (comment 1754427143).
Resources
Edited by Sarah German