Вот инструкция:

  1. Установить Tailwind.css CLI >= 4.0
  2. Настроить hugo_stats
  3. Импортировать Tailwind в css
  4. Подключить css через css.TailwindCSS
  5. Настроить Tailwind (необязательно)
  6. …
  7. Профит!

1. Ставим CLI

У Tailwind есть пакет с CLI в NPM. Запустите npm init, если в проекте ещё нет ноды.

npm install --save-dev tailwindcss @tailwindcss/cli

Чтобы не тянуть node.js, есть standalone бинарник.

2. Настраиваем статсу

Tailwind пересобирает стили под сайт. Это нужно, чтобы не тащить ненужные классы. Ещё Tailwind генерирует новые классы. Например, если вы написали some-utility-[420px], в Tailwind из коробки нет такого класса. Поэтому для сборки нужна статистика: что используется на сайте.

Hugo умеет писать статистику в файл hugo_stats.json.

[build]
  [build.buildStats]
    enable = true
  [[build.cachebusters]]
    source = 'assets/notwatching/hugo_stats\.json'
    target = 'css'
  [[build.cachebusters]]
    source = '(postcss|tailwind)\.config\.js'
    target = 'css'
[module]
  [[module.mounts]]
    source = 'assets'
    target = 'assets'
  [[module.mounts]]
    disableWatch = true
    source = 'hugo_stats.json'
    target = 'assets/notwatching/hugo_stats.json'

3. Импортируем Tailwind в css

Положим это в assets/css/main.css.

@import "tailwindcss";
@source "hugo_stats.json";

Импортируем явно hugo_stats.json, потому что Tailwind CLI уважает .gitignore.

4. Подключим css

Теперь сделаем partial, чтобы подключить наш main.css. В нём запустим css.TailwindCSS, чтобы обработать css через Tailwind CLI.

{{ with (templates.Defer (dict "key" "global")) }}
  {{ with resources.Get "css/main.css" }}
    {{ $opts := dict
      "minify" (not hugo.IsDevelopment)
      "inlineImports" true
    }}
    {{ with . | css.TailwindCSS $opts }}
      {{ if hugo.IsDevelopment }}
        <link rel="stylesheet" href="{{ .RelPermalink }}">
      {{ else }}
        {{ with . | fingerprint }}
          <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
        {{ end }}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

Подключим partial в шаблоне. Я сделаю это в baseof.html.

<head>
  <!-- ... -->
  {{ partialCached "css.html" . }}
  <!-- ... -->
<head>

5. Настроим Tailwind (необязательно)

Создайте tailwind.config.js, чтобы законфигурировать Tailwind.

// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}