How to configure Hugo to use the TailwindCSS v4 binary instead of npm?

support
1

Hi everybody, I’m new here.

I’m building my first fully fledge website. I’m building the theme and the website to consume the theme. I want to use TailwindCSS v4, but I don’t want to use the npm CLI version. I have installed the TailwindCSS binary and it is already in my PATH, but Hugo is looking for the npm one, not the binary CLI.

Error: error building site: TAILWINDCSS: failed to transform "/css/main.css" (text/css): npm notice

I don’t want to use npm. To give more context, the only thing I did was editing the partial that comes with the default hugo new theme command:

{{- with resources.Get "css/main.css" }}
  {{- $opts := dict "binary" "tailwindcss" "minify" true }}
  {{ with . | css.TailwindCSS $opts }}
    {{- if eq hugo.Environment "development" }}
      <link rel="stylesheet" href="{{ .RelPermalink }}">
    {{- else }}
      {{- with . | minify | fingerprint }}
        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
      {{- end }}
    {{- end }}
  {{- end }}
{{- end }}

And added this to the hugo.yaml file:

build:
  cachebusters:
    - source: "assets/css/.*.css"
      target: "css"

The tailwind binary is accessible from my command line with the tailwindcss command.