TailwindCSS + Hugo

support
1

I’m trying to build a simple website with Hugo and TailwindCSS 3.0.

I’ve followed this tutorial, but it seems like there are two separate build command required:

There also seem to to be issues (maybe resolved) that require some really weird custom templating code that I don’t seem to understand:

I also found this starter kit which uses this code to differentiate between server and dev environments. Which seems wonky. Is this normal for hugo?

{{ $styles := resources.Get "/css/style.css" | postCSS }}

{{ if .Site.IsServer }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}"/>
{{ else }}
  {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}"/>
{{ end }}

Is there a better way to use a 3rd party CSS framework like Tailwind with Hugo? I want it to be as simple as possible and as clean of a DevX as possible so that when I come back to this site next year, I don’t have to remember idiosyncrasies of each build system, custom scripts, or any weird abstractions.

2

The issues with Tailwind apparently are unresolved at this time, although some other comments seen here in the last few days indicate there may be progress soon. For now, you can probably assume the “make-Hugo-change-the-CSS-on-each-change” method will be necessary.

As for the last item — why a difference between server and dev environments in the particular example you gave — that looks like the person just chose not to minify the CSS or “cache-bust” it in dev mode. That’s actually neither an unusual convention nor a Hugo-specific one.

1 Like