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.