Doesn't change the final css: no watching

dirkolbrich / hugo-tailwindcss-starter-theme

Starter files for a Hugo theme with Tailwindcss

MIT License

400 stars 55 forks source link

Doesn't change the final css: no watching #46

Closed stimw closed 1 year ago

stimw commented 1 year ago

It seems that the tailwind doesn't watch the changes...

For example, if I add a class max-w-3xl, then it doesn't show up in the final css unless ctrl+c and re-run hugo server ...

feel like none of the current solutions solve the problem of Tailwind and Hugo collaboration

dirkolbrich commented 1 year ago

I think I found a solution inspired by a blog post by Bryce Wray. The trick seems to be to force Hugo Pipes to trigger a site rebuild when the CSS changes:

Interact with the CSS input file (e.g., assets/css/index.css) as if it were a template, via Hugo’s resources.ExecuteAsTemplate pipe
generate a random string with each Tailwind generation of the CSS file and pass it into the resulting template as part of the CSS file’s name. The method uses the now.UnixMilli function (present since Hugo 0.88.0), to inject a time-based string.

I hope this works. Please test and give me some feedback.