Tailwind setup

support
1

Hi I have a question regarding the tailwind setup. I have followed some guide to setup tailwind with hugo pipes and this is working.

But I have recognized that new utility classes I would like to use in the project are not available after the reload of the dev server. I have to stop and start the dev server again to get the newly used utility class ready to work.

My question is how can I get ride of this and can use new classes also on the reload of the dev server and get ride of the manually restart of the dev server.

Thanks for any help.

2

I stumbled upon the same issue today. The problem is, that your browser is caching stylesheets and changes to the stylesheet are not reflected in a different stylesheet .Permalink. The solution is this (exact implementation depends on how you do your stylesheet generation):

  {{- /* New Tailwind Stylesheets
  "outputStyle2" "compressed"
  */ -}}
  {{- $twoptions := dict
  "targetPath" "twtheme.css"
  "enableSourceMap" "false"
  "includePaths" (slice "node_modules/")
  -}}
  {{- $tailwind := resources.Get "scss2/theme.scss" -}}
  {{- $tailwind = $tailwind | resources.ToCSS $twoptions -}}
  {{- $tailwind = $tailwind | resources.PostCSS (dict "config" "path/to/postcss.config.js") -}}
  {{- if site.IsServer -}}
  {{- $tailwind = $tailwind | resources.ExecuteAsTemplate (printf "css/index.dev.%v.css" now.UnixMilli) . -}}
  {{- $tailwind = $tailwind | resources.PostProcess -}}
  <link rel="stylesheet" href="{{- $tailwind.Permalink -}}">
  {{- else -}}
  {{- $tailwind := $tailwind | minify | fingerprint | resources.PostProcess -}}
  <link rel="stylesheet" href="{{- $tailwind.Permalink -}}" integrity="{{- $tailwind.Data.Integrity -}}">
  {{- end -}}
  {{- /* New Tailwind Stylesheets DONE */ -}}

The point of interest is after {{- if site.IsServer -}}. You need to transform your stylesheet with a new link EVERY time it gets recreated. (printf "css/index.dev.%v.css" now.UnixMilli) will do that.

3

I think @davidsneighbour is right, this looks like a caching problem. A simple solution might be to disable the HTTP cache for your dev server:

hugo server --noHTTPCache
4

Stop right there and read the Release Notes of v0.112.0. Following that setup will solve most issues without hacking in your templates.

6

I prefer not using Hugo for Tailwind rather use Tailwind preprocessor on its own. That way such issues don’t occur.
Hugo parser works great for custom SCSS but for Tailwind and other, issues do pop up.