Tailwind v3.0 and Hugo

support
5

I found a type of ugly workaround for now. I am on Windows and use VS Code.

My head.html has this lines:

{{ $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 }}

In Terminal I do a:
npx tailwindcss -i ./assets/css/main.css -o ./assets/css/output.css --watch

Then I open another terminal and do: hugo server

Now I can see the changes in localhost:1313

To get the /public/ folder I do a hugo --minify

And I get the minified fingerprinted output.css (much longer file name than that of course)

So for now I need to use two running terminals. I am sure there is a more elegant way, but that is beyond my current knowledge.

I also found a one-command workaround:

Install concurrently
npm i -D concurrently

"scripts": {
    "start": "concurrently npm:watch:*",
    "watch:tw": "tailwindcss -i ./assets/css/main.css -o ./assets/css/style.css --watch",
    "watch:hugo": "hugo server",
    "build": "hugo --minify"
}

npm start start

Here a updated slightly refined version, it works fine. Install and go: